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

exports[`Storyshots Attributes / Attribute delete default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Attributes / Attribute value delete default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Attributes / Attribute value edit default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Attributes / Attribute value edit form errors 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Attributes / Attributes default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Attributes
        </span>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id Attributes-cardContent-id"
    >
      <div
        class="Attributes-expansionBar-id"
      >
        <div
          class="Attributes-expansionBarLabelContainer-id"
        >
          <div
            class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
          >
            10 Attributes
          </div>
        </div>
        <button
          class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
          data-test-id="attributes-expand"
          tabindex="0"
          type="button"
        >
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <path
              d="M7 10l5 5 5-5z"
            />
          </svg>
        </button>
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
      >
        <div
          class="BasicAttributeRow-attributeSectionLabel-id"
          data-test-id="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Dropdown Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-value-id"
          data-test-id="attribute-value"
        >
          <div
            aria-expanded="false"
            aria-haspopup="listbox"
            aria-labelledby="downshift-16-label"
            class="SingleAutocompleteSelectField-container-id"
            role="combobox"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                data-shrink="false"
              >
                Value
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              >
                <input
                  aria-autocomplete="list"
                  aria-invalid="false"
                  aria-labelledby="downshift-16-label"
                  autocomplete="off"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  id="downshift-16-input"
                  type="text"
                  value=""
                />
                <div
                  aria-haspopup="true"
                  aria-label="open menu"
                  class="SingleAutocompleteSelectField-adornment-id"
                  data-toggle="true"
                  role="button"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </div>
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id"
                  >
                    <span>
                      Value
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
        </div>
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
      >
        <div
          class="BasicAttributeRow-attributeSectionLabel-id"
          data-test-id="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Multiselect Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-value-id"
          data-test-id="attribute-value"
        >
          <div
            aria-expanded="false"
            aria-haspopup="listbox"
            aria-labelledby="downshift-17-label"
            class="MultiAutocompleteSelectField-container-id"
            role="combobox"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                data-shrink="false"
              >
                Values
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              >
                <input
                  aria-autocomplete="list"
                  aria-invalid="false"
                  aria-labelledby="downshift-17-label"
                  autocomplete="off"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  id="downshift-17-menu"
                  role="listbox"
                  type="text"
                  value=""
                />
                <div
                  aria-haspopup="true"
                  aria-label="open menu"
                  class="MultiAutocompleteSelectField-adornment-id"
                  data-toggle="true"
                  role="button"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </div>
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id"
                  >
                    <span>
                      Values
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
          <div
            class="MultiAutocompleteSelectField-chipContainer-id"
          />
        </div>
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
      >
        <div
          class="BasicAttributeRow-attributeSectionLabel-id"
          data-test-id="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            File Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-value-id"
          data-test-id="attribute-value"
        >
          <div
            class="AttributeRow-fileField-id"
          >
            <div>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="button-upload-file"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Choose file
                </span>
              </button>
            </div>
          </div>
          <input
            class="FileUploadField-fileField-id"
            data-test-id="upload-file-input"
            id="fileUpload"
            name="attribute:File Attribute"
            type="file"
          />
        </div>
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="ExtendedAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
      >
        <div
          class="ExtendedAttributeRow-attributeSectionLabel-id"
          data-test-id="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            References Attribute
          </div>
        </div>
        <div
          data-test-id="attribute-selector"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ExtendedAttributeRow-attributeSectionButton-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
            data-test-id="button-attribute-selector"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Assign references
            </span>
          </button>
        </div>
      </div>
      <div
        data-test-id="attribute-value"
      >
        <div />
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
      >
        <div
          class="BasicAttributeRow-attributeSectionLabel-id"
          data-test-id="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Text Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-value-id"
          data-test-id="attribute-value"
        >
          <div
            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
            data-test-id="rich-text-editor-attribute:Text Attribute"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
              data-shrink="true"
            >
              Value
            </label>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
            />
          </div>
        </div>
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
      >
        <div
          class="BasicAttributeRow-attributeSectionLabel-id"
          data-test-id="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Numeric Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-value-id"
          data-test-id="attribute-value"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
              data-shrink="false"
            >
              Value
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                name="attribute:Numeric Attribute"
                type="number"
              />
              <div
                class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                >
                  cm
                </div>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id"
                >
                  <span>
                    Value
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
      >
        <div
          class="BasicAttributeRow-attributeSectionLabel-id"
          data-test-id="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Boolean Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-value-id"
          data-test-id="attribute-value"
        >
          <div
            class="AttributeRow-pullRight-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id AttributeRow-pullRight-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  name="attribute:Boolean Attribute"
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <rect
                    fill="transparent"
                    height="22"
                    rx="2"
                    ry="2"
                    stroke="currentColor"
                    stroke-linejoin="round"
                    stroke-width="2"
                    width="22"
                    x="1"
                    y="1"
                  />
                </svg>
              </span>
            </span>
          </div>
        </div>
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
      >
        <div
          class="BasicAttributeRow-attributeSectionLabel-id"
          data-test-id="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Date Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-value-id BasicAttributeRow-flex-id"
          data-test-id="attribute-value"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
              data-shrink="true"
            >
              Date
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="attribute:Date Attribute"
                type="date"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                >
                  <span>
                    Date
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
      >
        <div
          class="BasicAttributeRow-attributeSectionLabel-id"
          data-test-id="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Date Time Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-value-id BasicAttributeRow-flex-id"
          data-test-id="attribute-value"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
              data-shrink="true"
            >
              Date
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="attribute:Date Time Attribute:date"
                type="date"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                >
                  <span>
                    Date
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
              data-shrink="true"
            >
              Time
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="attribute:Date Time Attribute:time"
                type="time"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                >
                  <span>
                    Time
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
      >
        <div
          class="BasicAttributeRow-attributeSectionLabel-id"
          data-test-id="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Swatch Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-value-id"
          data-test-id="attribute-value"
        >
          <div
            aria-expanded="false"
            aria-haspopup="listbox"
            aria-labelledby="downshift-18-label"
            class="SingleAutocompleteSelectField-container-id"
            role="combobox"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedStart-id MuiOutlinedInput-adornedStart-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              >
                <div
                  class="MuiInputAdornment-root-id MuiInputAdornment-positionStart-id"
                >
                  <div
                    class="AttributeRow-swatchPreview-id"
                  />
                </div>
                <input
                  aria-autocomplete="list"
                  aria-invalid="false"
                  aria-labelledby="downshift-18-label"
                  autocomplete="off"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id AttributeRow-swatchInput-id MuiInputBase-inputAdornedStart-id MuiOutlinedInput-inputAdornedStart-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  id="downshift-18-input"
                  type="text"
                  value=""
                />
                <div
                  aria-haspopup="true"
                  aria-label="open menu"
                  class="SingleAutocompleteSelectField-adornment-id"
                  data-toggle="true"
                  role="button"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </div>
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Attributes / Attributes disabled 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Attributes
        </span>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id Attributes-cardContent-id"
    >
      <div
        class="Attributes-expansionBar-id"
      >
        <div
          class="Attributes-expansionBarLabelContainer-id"
        >
          <div
            class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
          >
            10 Attributes
          </div>
        </div>
        <button
          class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
          data-test-id="attributes-expand"
          tabindex="0"
          type="button"
        >
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <path
              d="M7 10l5 5 5-5z"
            />
          </svg>
        </button>
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
      >
        <div
          class="BasicAttributeRow-attributeSectionLabel-id"
          data-test-id="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Dropdown Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-value-id"
          data-test-id="attribute-value"
        >
          <div
            aria-expanded="false"
            aria-haspopup="listbox"
            aria-labelledby="downshift-22-label"
            class="SingleAutocompleteSelectField-container-id"
            role="combobox"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                data-shrink="false"
              >
                Value
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              >
                <input
                  aria-autocomplete="list"
                  aria-invalid="false"
                  aria-labelledby="downshift-22-label"
                  autocomplete="off"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  disabled=""
                  id="downshift-22-input"
                  type="text"
                  value=""
                />
                <div
                  aria-haspopup="true"
                  aria-label="open menu"
                  class="SingleAutocompleteSelectField-adornment-id"
                  data-toggle="true"
                  role="button"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </div>
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id"
                  >
                    <span>
                      Value
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
        </div>
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
      >
        <div
          class="BasicAttributeRow-attributeSectionLabel-id"
          data-test-id="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Multiselect Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-value-id"
          data-test-id="attribute-value"
        >
          <div
            aria-expanded="false"
            aria-haspopup="listbox"
            aria-labelledby="downshift-23-label"
            class="MultiAutocompleteSelectField-container-id"
            role="combobox"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                data-shrink="false"
              >
                Values
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              >
                <input
                  aria-autocomplete="list"
                  aria-invalid="false"
                  aria-labelledby="downshift-23-label"
                  autocomplete="off"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  disabled=""
                  id="downshift-23-menu"
                  role="listbox"
                  type="text"
                  value=""
                />
                <div
                  aria-haspopup="true"
                  aria-label="open menu"
                  class="MultiAutocompleteSelectField-adornment-id"
                  data-toggle="true"
                  role="button"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </div>
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id"
                  >
                    <span>
                      Values
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
          <div
            class="MultiAutocompleteSelectField-chipContainer-id"
          />
        </div>
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
      >
        <div
          class="BasicAttributeRow-attributeSectionLabel-id"
          data-test-id="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            File Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-value-id"
          data-test-id="attribute-value"
        >
          <div
            class="AttributeRow-fileField-id"
          >
            <div>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                data-test-id="button-upload-file"
                disabled=""
                tabindex="-1"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Choose file
                </span>
              </button>
            </div>
          </div>
          <input
            class="FileUploadField-fileField-id"
            data-test-id="upload-file-input"
            id="fileUpload"
            name="attribute:File Attribute"
            type="file"
          />
        </div>
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="ExtendedAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
      >
        <div
          class="ExtendedAttributeRow-attributeSectionLabel-id"
          data-test-id="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            References Attribute
          </div>
        </div>
        <div
          data-test-id="attribute-selector"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ExtendedAttributeRow-attributeSectionButton-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
            data-test-id="button-attribute-selector"
            disabled=""
            tabindex="-1"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Assign references
            </span>
          </button>
        </div>
      </div>
      <div
        data-test-id="attribute-value"
      >
        <div />
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
      >
        <div
          class="BasicAttributeRow-attributeSectionLabel-id"
          data-test-id="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Text Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-value-id"
          data-test-id="attribute-value"
        >
          <div
            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
            data-test-id="rich-text-editor-attribute:Text Attribute"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
              data-shrink="true"
            >
              Value
            </label>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
            />
          </div>
        </div>
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
      >
        <div
          class="BasicAttributeRow-attributeSectionLabel-id"
          data-test-id="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Numeric Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-value-id"
          data-test-id="attribute-value"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
              data-shrink="false"
            >
              Value
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                disabled=""
                name="attribute:Numeric Attribute"
                type="number"
              />
              <div
                class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                >
                  cm
                </div>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id"
                >
                  <span>
                    Value
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
      >
        <div
          class="BasicAttributeRow-attributeSectionLabel-id"
          data-test-id="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Boolean Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-value-id"
          data-test-id="attribute-value"
        >
          <div
            class="AttributeRow-pullRight-id"
          >
            <span
              aria-disabled="true"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id AttributeRow-pullRight-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
              tabindex="-1"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  disabled=""
                  name="attribute:Boolean Attribute"
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <rect
                    fill="transparent"
                    height="22"
                    rx="2"
                    ry="2"
                    stroke="currentColor"
                    stroke-linejoin="round"
                    stroke-width="2"
                    width="22"
                    x="1"
                    y="1"
                  />
                </svg>
              </span>
            </span>
          </div>
        </div>
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
      >
        <div
          class="BasicAttributeRow-attributeSectionLabel-id"
          data-test-id="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Date Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-value-id BasicAttributeRow-flex-id"
          data-test-id="attribute-value"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
              data-shrink="true"
            >
              Date
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                disabled=""
                name="attribute:Date Attribute"
                type="date"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                >
                  <span>
                    Date
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
      >
        <div
          class="BasicAttributeRow-attributeSectionLabel-id"
          data-test-id="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Date Time Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-value-id BasicAttributeRow-flex-id"
          data-test-id="attribute-value"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
              data-shrink="true"
            >
              Date
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                disabled=""
                name="attribute:Date Time Attribute:date"
                type="date"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                >
                  <span>
                    Date
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
              data-shrink="true"
            >
              Time
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                disabled=""
                name="attribute:Date Time Attribute:time"
                type="time"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                >
                  <span>
                    Time
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
      >
        <div
          class="BasicAttributeRow-attributeSectionLabel-id"
          data-test-id="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Swatch Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-value-id"
          data-test-id="attribute-value"
        >
          <div
            aria-expanded="false"
            aria-haspopup="listbox"
            aria-labelledby="downshift-24-label"
            class="SingleAutocompleteSelectField-container-id"
            role="combobox"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedStart-id MuiOutlinedInput-adornedStart-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              >
                <div
                  class="MuiInputAdornment-root-id MuiInputAdornment-positionStart-id"
                >
                  <div
                    class="AttributeRow-swatchPreview-id"
                  />
                </div>
                <input
                  aria-autocomplete="list"
                  aria-invalid="false"
                  aria-labelledby="downshift-24-label"
                  autocomplete="off"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id AttributeRow-swatchInput-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedStart-id MuiOutlinedInput-inputAdornedStart-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  disabled=""
                  id="downshift-24-input"
                  type="text"
                  value=""
                />
                <div
                  aria-haspopup="true"
                  aria-label="open menu"
                  class="SingleAutocompleteSelectField-adornment-id"
                  data-toggle="true"
                  role="button"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </div>
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Attributes / Attributes selected 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Attributes
        </span>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id Attributes-cardContent-id"
    >
      <div
        class="Attributes-expansionBar-id"
      >
        <div
          class="Attributes-expansionBarLabelContainer-id"
        >
          <div
            class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
          >
            10 Attributes
          </div>
        </div>
        <button
          class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
          data-test-id="attributes-expand"
          tabindex="0"
          type="button"
        >
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <path
              d="M7 10l5 5 5-5z"
            />
          </svg>
        </button>
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
      >
        <div
          class="BasicAttributeRow-attributeSectionLabel-id"
          data-test-id="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Dropdown Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-value-id"
          data-test-id="attribute-value"
        >
          <div
            aria-expanded="false"
            aria-haspopup="listbox"
            aria-labelledby="downshift-19-label"
            class="SingleAutocompleteSelectField-container-id"
            role="combobox"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                data-shrink="false"
              >
                Value
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              >
                <input
                  aria-autocomplete="list"
                  aria-invalid="false"
                  aria-labelledby="downshift-19-label"
                  autocomplete="off"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  id="downshift-19-input"
                  type="text"
                  value="Dropdown First Value"
                />
                <div
                  aria-haspopup="true"
                  aria-label="open menu"
                  class="SingleAutocompleteSelectField-adornment-id"
                  data-toggle="true"
                  role="button"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </div>
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id"
                  >
                    <span>
                      Value
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
        </div>
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
      >
        <div
          class="BasicAttributeRow-attributeSectionLabel-id"
          data-test-id="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Multiselect Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-value-id"
          data-test-id="attribute-value"
        >
          <div
            aria-expanded="false"
            aria-haspopup="listbox"
            aria-labelledby="downshift-20-label"
            class="MultiAutocompleteSelectField-container-id"
            role="combobox"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                data-shrink="false"
              >
                Values
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              >
                <input
                  aria-autocomplete="list"
                  aria-invalid="false"
                  aria-labelledby="downshift-20-label"
                  autocomplete="off"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  id="downshift-20-menu"
                  role="listbox"
                  type="text"
                  value=""
                />
                <div
                  aria-haspopup="true"
                  aria-label="open menu"
                  class="MultiAutocompleteSelectField-adornment-id"
                  data-toggle="true"
                  role="button"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </div>
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id"
                  >
                    <span>
                      Values
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
          <div
            class="MultiAutocompleteSelectField-chipContainer-id"
          >
            <div
              class="MultiAutocompleteSelectField-chip-id"
            >
              <div
                class="MultiAutocompleteSelectField-chipInner-id"
              >
                <div
                  class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                >
                  Multiselect First Value
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                  data-test-id="remove"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                    />
                  </svg>
                </button>
              </div>
            </div>
            <div
              class="MultiAutocompleteSelectField-chip-id"
            >
              <div
                class="MultiAutocompleteSelectField-chipInner-id"
              >
                <div
                  class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                >
                  Multiselect Second Value
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                  data-test-id="remove"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                    />
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
      >
        <div
          class="BasicAttributeRow-attributeSectionLabel-id"
          data-test-id="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            File Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-value-id"
          data-test-id="attribute-value"
        >
          <div
            class="AttributeRow-fileField-id"
          >
            <div
              class="FileUploadField-uploadFileContent-id"
            >
              <div
                class="FileUploadField-uploadFileName-id"
              >
                <a
                  class="FileUploadField-fileUrl-id"
                  href="some-non-existing-url"
                  target="blank"
                >
                  File First Value
                </a>
              </div>
              <button
                class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                color="primary"
                data-test-id="button-delete-file"
                tabindex="0"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="24"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="1.5"
                  />
                </svg>
              </button>
            </div>
          </div>
          <input
            class="FileUploadField-fileField-id"
            data-test-id="upload-file-input"
            id="fileUpload"
            name="attribute:File Attribute"
            type="file"
          />
        </div>
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="ExtendedAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
      >
        <div
          class="ExtendedAttributeRow-attributeSectionLabel-id"
          data-test-id="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            References Attribute
          </div>
        </div>
        <div
          data-test-id="attribute-selector"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ExtendedAttributeRow-attributeSectionButton-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
            data-test-id="button-attribute-selector"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Assign references
            </span>
          </button>
        </div>
      </div>
      <div
        data-test-id="attribute-value"
      >
        <div>
          <div
            class="SortableChip-root-id SortableChipsField-chip-id"
          >
            <div
              class="SortableChip-content-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
                data-test-id="button-drag-handle"
                fill="none"
                focusable="false"
                height="24"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  clip-rule="evenodd"
                  d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                  fill="currentColor"
                  fill-rule="evenodd"
                />
              </svg>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
                data-test-id="chip-label"
              >
                References First Value
              </div>
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
                data-test-id="button-close"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                />
              </svg>
            </div>
          </div>
          <div
            class="SortableChip-root-id SortableChipsField-chip-id"
          >
            <div
              class="SortableChip-content-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
                data-test-id="button-drag-handle"
                fill="none"
                focusable="false"
                height="24"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  clip-rule="evenodd"
                  d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                  fill="currentColor"
                  fill-rule="evenodd"
                />
              </svg>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
                data-test-id="chip-label"
              >
                References Second Value
              </div>
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
                data-test-id="button-close"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                />
              </svg>
            </div>
          </div>
          <div
            class="SortableChip-root-id SortableChipsField-chip-id"
          >
            <div
              class="SortableChip-content-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
                data-test-id="button-drag-handle"
                fill="none"
                focusable="false"
                height="24"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  clip-rule="evenodd"
                  d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                  fill="currentColor"
                  fill-rule="evenodd"
                />
              </svg>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
                data-test-id="chip-label"
              >
                References Third Value
              </div>
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
                data-test-id="button-close"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                />
              </svg>
            </div>
          </div>
        </div>
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
      >
        <div
          class="BasicAttributeRow-attributeSectionLabel-id"
          data-test-id="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Text Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-value-id"
          data-test-id="attribute-value"
        >
          <div
            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
            data-test-id="rich-text-editor-attribute:Text Attribute"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
              data-shrink="true"
            >
              Value
            </label>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
            />
          </div>
        </div>
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
      >
        <div
          class="BasicAttributeRow-attributeSectionLabel-id"
          data-test-id="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Numeric Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-value-id"
          data-test-id="attribute-value"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
              data-shrink="true"
            >
              Value
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                name="attribute:Numeric Attribute"
                type="number"
                value="12"
              />
              <div
                class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                >
                  cm
                </div>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                >
                  <span>
                    Value
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
      >
        <div
          class="BasicAttributeRow-attributeSectionLabel-id"
          data-test-id="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Boolean Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-value-id"
          data-test-id="attribute-value"
        >
          <div
            class="AttributeRow-pullRight-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id AttributeRow-pullRight-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  checked=""
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  name="attribute:Boolean Attribute"
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <svg
                    fill="none"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <rect
                      fill="currentColor"
                      height="23"
                      rx="1.5"
                      width="23"
                      x="0.5"
                      y="0.5"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                      fill="var(--background-paper)"
                      fill-rule="evenodd"
                    />
                  </svg>
                </svg>
              </span>
            </span>
          </div>
        </div>
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
      >
        <div
          class="BasicAttributeRow-attributeSectionLabel-id"
          data-test-id="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Date Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-value-id BasicAttributeRow-flex-id"
          data-test-id="attribute-value"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
              data-shrink="true"
            >
              Date
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="attribute:Date Attribute"
                type="date"
                value="2021-06-03"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                >
                  <span>
                    Date
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
      >
        <div
          class="BasicAttributeRow-attributeSectionLabel-id"
          data-test-id="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Date Time Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-value-id BasicAttributeRow-flex-id"
          data-test-id="attribute-value"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
              data-shrink="true"
            >
              Date
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="attribute:Date Time Attribute:date"
                type="date"
                value="2021-06-03"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                >
                  <span>
                    Date
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
              data-shrink="true"
            >
              Time
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="attribute:Date Time Attribute:time"
                type="time"
                value="00:15"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                >
                  <span>
                    Time
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
      >
        <div
          class="BasicAttributeRow-attributeSectionLabel-id"
          data-test-id="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Swatch Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-value-id"
          data-test-id="attribute-value"
        >
          <div
            aria-expanded="false"
            aria-haspopup="listbox"
            aria-labelledby="downshift-21-label"
            class="SingleAutocompleteSelectField-container-id"
            role="combobox"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedStart-id MuiOutlinedInput-adornedStart-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              >
                <div
                  class="MuiInputAdornment-root-id MuiInputAdornment-positionStart-id"
                >
                  <div
                    class="AttributeRow-swatchPreview-id"
                    style="background-color:#FF0000"
                  />
                </div>
                <input
                  aria-autocomplete="list"
                  aria-invalid="false"
                  aria-labelledby="downshift-21-label"
                  autocomplete="off"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id AttributeRow-swatchInput-id MuiInputBase-inputAdornedStart-id MuiOutlinedInput-inputAdornedStart-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  id="downshift-21-input"
                  type="text"
                  value="Red"
                />
                <div
                  aria-haspopup="true"
                  aria-label="open menu"
                  class="SingleAutocompleteSelectField-adornment-id"
                  data-toggle="true"
                  role="button"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </div>
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Attributes / Delete multiple attributes default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Channels / Cannot define channels availability card default 1`] = `
<div
  style="margin:auto;overflow:visible;min-height:800px;width:400px;display:flex;justify-content:center;align-items:center"
>
  <div
    style="padding:24px"
  >
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            Availability
          </span>
        </div>
      </div>
      <div
        class="MuiCardContent-root-id"
      >
        You will be able to define availability of product after creating variants.
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Channels / Channels with Variants Availability Dialog default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Channels / Channels with variants availability card default 1`] = `
<div
  style="margin:auto;overflow:visible;min-height:800px;width:400px;display:flex;justify-content:center;align-items:center"
>
  <div
    style="padding:24px"
  >
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            Availability
          </span>
        </div>
        <div
          class="MuiCardHeader-action-id"
        />
      </div>
      <div
        class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
      >
        <div
          class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
        >
          Available at 2 out of 3 channels
        </div>
        <hr
          class="Hr-root-id ChannelsAvailabilityCard-hr-id"
        />
        <div
          class="MuiPaper-root-id MuiAccordion-root-id ChannelWithVariantAvailabilityItemWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
        >
          <div
            aria-disabled="false"
            aria-expanded="false"
            class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelWithVariantAvailabilityItemWrapperSummary-root-id"
            role="button"
            tabindex="0"
          >
            <div
              class="MuiAccordionSummary-content-id ChannelWithVariantAvailabilityItemWrapperSummary-content-id"
            >
              <div
                class="ChannelWithVariantAvailabilityItemWrapper-container-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Channel 1
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                  style="font-size:12px"
                >
                  2 variants
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                  style="font-size:12px"
                >
                  Visible since 07/30/2020
                </div>
              </div>
            </div>
            <div
              aria-disabled="false"
              aria-hidden="true"
              class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  data-test-id="expand-icon"
                  fill="none"
                  height="7"
                  viewBox="0 0 10 7"
                  width="10"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M1 1L5 5L9 1"
                    stroke="#28234A"
                    stroke-opacity="0.4"
                    stroke-width="2"
                  />
                </svg>
              </span>
            </div>
          </div>
          <div
            class="MuiCollapse-container-id MuiCollapse-hidden-id"
            style="min-height:0px"
          >
            <div
              class="MuiCollapse-wrapper-id"
            >
              <div
                class="MuiCollapse-wrapperInner-id"
              >
                <div
                  role="region"
                >
                  <div
                    class="ChannelsAvailabilityCard-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                    >
                      <div
                        aria-label="isPublished"
                        class="MuiFormGroup-root-id"
                        role="radiogroup"
                      >
                        <label
                          class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                        >
                          <span
                            aria-disabled="false"
                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <input
                                checked=""
                                class="PrivateSwitchBase-input-id"
                                name="isPublished"
                                type="radio"
                                value="true"
                              />
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <circle
                                  cx="12"
                                  cy="12"
                                  fill="currentColor"
                                  r="12"
                                />
                                <circle
                                  cx="12"
                                  cy="12"
                                  fill="var(--background-paper)"
                                  r="5"
                                />
                              </svg>
                            </span>
                          </span>
                          <span
                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                          >
                            <p
                              class="ChannelsAvailabilityCard-label-id"
                            >
                              Published
                            </p>
                          </span>
                        </label>
                        <label
                          class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                        >
                          <span
                            aria-disabled="false"
                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <input
                                class="PrivateSwitchBase-input-id"
                                name="isPublished"
                                type="radio"
                                value="false"
                              />
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <circle
                                  cx="12"
                                  cy="12"
                                  fill="var(--background-paper)"
                                  r="11"
                                  stroke="currentColor"
                                  stroke-width="2"
                                />
                              </svg>
                            </span>
                          </span>
                          <span
                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                          >
                            <p
                              class="ChannelsAvailabilityCard-label-id"
                            >
                              Not published
                            </p>
                          </span>
                        </label>
                      </div>
                    </div>
                    <hr
                      class="Hr-root-id"
                    />
                    <div
                      class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                    >
                      <div
                        aria-label="channel:isAvailableForPurchase:1"
                        class="MuiFormGroup-root-id"
                        role="radiogroup"
                      >
                        <label
                          class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                        >
                          <span
                            aria-disabled="false"
                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <input
                                class="PrivateSwitchBase-input-id"
                                name="channel:isAvailableForPurchase:1"
                                type="radio"
                                value="true"
                              />
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <circle
                                  cx="12"
                                  cy="12"
                                  fill="var(--background-paper)"
                                  r="11"
                                  stroke="currentColor"
                                  stroke-width="2"
                                />
                              </svg>
                            </span>
                          </span>
                          <span
                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                          >
                            <p
                              class="ChannelsAvailabilityCard-label-id"
                            >
                              Available for purchase
                            </p>
                          </span>
                        </label>
                        <label
                          class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                        >
                          <span
                            aria-disabled="false"
                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <input
                                checked=""
                                class="PrivateSwitchBase-input-id"
                                name="channel:isAvailableForPurchase:1"
                                type="radio"
                                value="false"
                              />
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <circle
                                  cx="12"
                                  cy="12"
                                  fill="currentColor"
                                  r="12"
                                />
                                <circle
                                  cx="12"
                                  cy="12"
                                  fill="var(--background-paper)"
                                  r="5"
                                />
                              </svg>
                            </span>
                          </span>
                          <span
                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                          >
                            <p
                              class="ChannelsAvailabilityCard-label-id"
                            >
                              Unavailable for purchase
                            </p>
                          </span>
                        </label>
                      </div>
                    </div>
                    <div
                      class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
                    >
                      Set availability date
                    </div>
                    <hr
                      class="Hr-root-id"
                    />
                    <label
                      class="MuiFormControlLabel-root-id ChannelsAvailabilityCard-checkbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            name="channel:visibleInListings:1"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                      >
                        <p
                          class="ChannelsAvailabilityCard-label-id ChannelsAvailabilityCard-listingLabel-id"
                        >
                          Show in product listings
                        </p>
                        <span
                          class="ChannelsAvailabilityCard-secondLabel-id"
                        >
                          Disabling this checkbox will remove product from search and category pages. It will be available on collection pages.
                        </span>
                      </span>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiAccordion-root-id ChannelWithVariantAvailabilityItemWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
        >
          <div
            aria-disabled="false"
            aria-expanded="false"
            class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelWithVariantAvailabilityItemWrapperSummary-root-id"
            role="button"
            tabindex="0"
          >
            <div
              class="MuiAccordionSummary-content-id ChannelWithVariantAvailabilityItemWrapperSummary-content-id"
            >
              <div
                class="ChannelWithVariantAvailabilityItemWrapper-container-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Channel 2
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                  style="font-size:12px"
                >
                  2 variants
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                  style="font-size:12px"
                >
                  Visible since 07/30/2020
                </div>
              </div>
            </div>
            <div
              aria-disabled="false"
              aria-hidden="true"
              class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  data-test-id="expand-icon"
                  fill="none"
                  height="7"
                  viewBox="0 0 10 7"
                  width="10"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M1 1L5 5L9 1"
                    stroke="#28234A"
                    stroke-opacity="0.4"
                    stroke-width="2"
                  />
                </svg>
              </span>
            </div>
          </div>
          <div
            class="MuiCollapse-container-id MuiCollapse-hidden-id"
            style="min-height:0px"
          >
            <div
              class="MuiCollapse-wrapper-id"
            >
              <div
                class="MuiCollapse-wrapperInner-id"
              >
                <div
                  role="region"
                >
                  <div
                    class="ChannelsAvailabilityCard-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                    >
                      <div
                        aria-label="isPublished"
                        class="MuiFormGroup-root-id"
                        role="radiogroup"
                      >
                        <label
                          class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                        >
                          <span
                            aria-disabled="false"
                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <input
                                checked=""
                                class="PrivateSwitchBase-input-id"
                                name="isPublished"
                                type="radio"
                                value="true"
                              />
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <circle
                                  cx="12"
                                  cy="12"
                                  fill="currentColor"
                                  r="12"
                                />
                                <circle
                                  cx="12"
                                  cy="12"
                                  fill="var(--background-paper)"
                                  r="5"
                                />
                              </svg>
                            </span>
                          </span>
                          <span
                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                          >
                            <p
                              class="ChannelsAvailabilityCard-label-id"
                            >
                              Published
                            </p>
                          </span>
                        </label>
                        <label
                          class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                        >
                          <span
                            aria-disabled="false"
                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <input
                                class="PrivateSwitchBase-input-id"
                                name="isPublished"
                                type="radio"
                                value="false"
                              />
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <circle
                                  cx="12"
                                  cy="12"
                                  fill="var(--background-paper)"
                                  r="11"
                                  stroke="currentColor"
                                  stroke-width="2"
                                />
                              </svg>
                            </span>
                          </span>
                          <span
                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                          >
                            <p
                              class="ChannelsAvailabilityCard-label-id"
                            >
                              Not published
                            </p>
                          </span>
                        </label>
                      </div>
                    </div>
                    <hr
                      class="Hr-root-id"
                    />
                    <div
                      class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                    >
                      <div
                        aria-label="channel:isAvailableForPurchase:2"
                        class="MuiFormGroup-root-id"
                        role="radiogroup"
                      >
                        <label
                          class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                        >
                          <span
                            aria-disabled="false"
                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <input
                                class="PrivateSwitchBase-input-id"
                                name="channel:isAvailableForPurchase:2"
                                type="radio"
                                value="true"
                              />
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <circle
                                  cx="12"
                                  cy="12"
                                  fill="var(--background-paper)"
                                  r="11"
                                  stroke="currentColor"
                                  stroke-width="2"
                                />
                              </svg>
                            </span>
                          </span>
                          <span
                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                          >
                            <p
                              class="ChannelsAvailabilityCard-label-id"
                            >
                              Available for purchase
                            </p>
                          </span>
                        </label>
                        <label
                          class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                        >
                          <span
                            aria-disabled="false"
                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <input
                                checked=""
                                class="PrivateSwitchBase-input-id"
                                name="channel:isAvailableForPurchase:2"
                                type="radio"
                                value="false"
                              />
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <circle
                                  cx="12"
                                  cy="12"
                                  fill="currentColor"
                                  r="12"
                                />
                                <circle
                                  cx="12"
                                  cy="12"
                                  fill="var(--background-paper)"
                                  r="5"
                                />
                              </svg>
                            </span>
                          </span>
                          <span
                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                          >
                            <p
                              class="ChannelsAvailabilityCard-label-id"
                            >
                              Unavailable for purchase
                            </p>
                          </span>
                        </label>
                      </div>
                    </div>
                    <div
                      class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
                    >
                      Set availability date
                    </div>
                    <hr
                      class="Hr-root-id"
                    />
                    <label
                      class="MuiFormControlLabel-root-id ChannelsAvailabilityCard-checkbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            name="channel:visibleInListings:2"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                      >
                        <p
                          class="ChannelsAvailabilityCard-label-id ChannelsAvailabilityCard-listingLabel-id"
                        >
                          Show in product listings
                        </p>
                        <span
                          class="ChannelsAvailabilityCard-secondLabel-id"
                        >
                          Disabling this checkbox will remove product from search and category pages. It will be available on collection pages.
                        </span>
                      </span>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Component / Preview Pill default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiChip-root-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
  >
    <span
      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
    >
      Preview
    </span>
  </div>
</div>
`;

exports[`Storyshots Customers / Address editing dialog default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Customers / Address editing dialog edit 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Discounts / Select countries default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Generics / Accordion default 1`] = `
<div
  class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation1-id MuiPaper-rounded-id"
  style="margin:auto;overflow:visible;position:relative;width:400px"
>
  <div
    class="MuiCardContent-root-id"
  >
    <div
      style="padding:24px"
    >
      <div
        class="Accordion-root-id"
      >
        <div
          class="Accordion-title-id"
        >
          <div
            class="MuiTypography-root-id Accordion-titleText-id MuiTypography-body1-id"
          >
            Title
          </div>
          <div
            class="Accordion-expandButton-id"
          >
            <button
              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Accordion opened 1`] = `
<div
  class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation1-id MuiPaper-rounded-id"
  style="margin:auto;overflow:visible;position:relative;width:400px"
>
  <div
    class="MuiCardContent-root-id"
  >
    <div
      style="padding:24px"
    >
      <div
        class="Accordion-root-id"
      >
        <div
          class="Accordion-title-id"
        >
          <div
            class="MuiTypography-root-id Accordion-titleText-id MuiTypography-body1-id"
          >
            Title
          </div>
          <div
            class="Accordion-expandButton-id"
          >
            <button
              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13H5v-2h14v2z"
                />
              </svg>
            </button>
          </div>
        </div>
        <hr
          class="Hr-root-id"
        />
        <div
          class="Accordion-content-id"
        >
          Content
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Accordion with quick peek 1`] = `
<div
  class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation1-id MuiPaper-rounded-id"
  style="margin:auto;overflow:visible;position:relative;width:400px"
>
  <div
    class="MuiCardContent-root-id"
  >
    <div
      style="padding:24px"
    >
      <div
        class="Accordion-root-id"
      >
        <div
          class="Accordion-title-id"
        >
          <div
            class="MuiTypography-root-id Accordion-titleText-id MuiTypography-body1-id"
          >
            Title
          </div>
          <div
            class="Accordion-expandButton-id"
          >
            <button
              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
              </svg>
            </button>
          </div>
        </div>
        <hr
          class="Hr-root-id"
        />
        <div
          class="Accordion-content-id"
        >
          Quick Peek
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Account Permission Groups Widget default 1`] = `
<div
  style="padding:24px"
>
  <div
    aria-expanded="false"
    aria-haspopup="listbox"
    aria-labelledby="downshift-14-label"
    class="MultiAutocompleteSelectField-container-id"
    data-test-id="permission-groups"
    role="combobox"
  >
    <div
      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
    >
      <label
        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
        data-shrink="false"
      >
        Permission groups
      </label>
      <div
        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
      >
        <input
          aria-autocomplete="list"
          aria-invalid="false"
          aria-labelledby="downshift-14-label"
          autocomplete="off"
          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
          id="downshift-14-menu"
          role="listbox"
          type="text"
          value=""
        />
        <div
          aria-haspopup="true"
          aria-label="open menu"
          class="MultiAutocompleteSelectField-adornment-id"
          data-toggle="true"
          role="button"
          type="button"
        >
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id MacawIcon-root-id"
            fill="none"
            focusable="false"
            height="24"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="m8 10 4 4 4-4"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="1.5"
            />
          </svg>
        </div>
        <fieldset
          aria-hidden="true"
          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
        >
          <legend
            class="PrivateNotchedOutline-legendLabelled-id"
          >
            <span>
              Permission groups
            </span>
          </legend>
        </fieldset>
      </div>
    </div>
  </div>
  <div
    class="MultiAutocompleteSelectField-chipContainer-id"
  >
    <div
      class="MultiAutocompleteSelectField-chip-id"
    >
      <div
        class="MultiAutocompleteSelectField-disabledChipInner-id"
      >
        <div
          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
        >
          Unmanagable by user
        </div>
        <button
          class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id MuiButtonBase-disabled-id"
          data-test-id="remove"
          disabled=""
          tabindex="-1"
          type="button"
        >
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <path
              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
            />
          </svg>
        </button>
      </div>
    </div>
    <div
      class="MultiAutocompleteSelectField-chip-id"
    >
      <div
        class="MultiAutocompleteSelectField-chipInner-id"
      >
        <div
          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
        >
          Default group
        </div>
        <button
          class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
          data-test-id="remove"
          tabindex="0"
          type="button"
        >
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <path
              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
            />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Account Permission Groups Widget error 1`] = `
<div
  style="padding:24px"
>
  <div
    aria-expanded="false"
    aria-haspopup="listbox"
    aria-labelledby="downshift-15-label"
    class="MultiAutocompleteSelectField-container-id"
    data-test-id="permission-groups"
    role="combobox"
  >
    <div
      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
    >
      <label
        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
        data-shrink="false"
      >
        Permission groups
      </label>
      <div
        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
      >
        <input
          aria-autocomplete="list"
          aria-invalid="false"
          aria-labelledby="downshift-15-label"
          autocomplete="off"
          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
          id="downshift-15-menu"
          role="listbox"
          type="text"
          value=""
        />
        <div
          aria-haspopup="true"
          aria-label="open menu"
          class="MultiAutocompleteSelectField-adornment-id"
          data-toggle="true"
          role="button"
          type="button"
        >
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id MacawIcon-root-id"
            fill="none"
            focusable="false"
            height="24"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="m8 10 4 4 4-4"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="1.5"
            />
          </svg>
        </div>
        <fieldset
          aria-hidden="true"
          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
        >
          <legend
            class="PrivateNotchedOutline-legendLabelled-id"
          >
            <span>
              Permission groups
            </span>
          </legend>
        </fieldset>
      </div>
    </div>
  </div>
  <div
    class="MultiAutocompleteSelectField-chipContainer-id"
  >
    <div
      class="MultiAutocompleteSelectField-chip-id"
    >
      <div
        class="MultiAutocompleteSelectField-disabledChipInner-id"
      >
        <div
          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
        >
          Unmanagable by user
        </div>
        <button
          class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id MuiButtonBase-disabled-id"
          data-test-id="remove"
          disabled=""
          tabindex="-1"
          type="button"
        >
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <path
              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
            />
          </svg>
        </button>
      </div>
    </div>
    <div
      class="MultiAutocompleteSelectField-chip-id"
    >
      <div
        class="MultiAutocompleteSelectField-chipInner-id"
      >
        <div
          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
        >
          Default group
        </div>
        <button
          class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
          data-test-id="remove"
          tabindex="0"
          type="button"
        >
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <path
              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
            />
          </svg>
        </button>
      </div>
    </div>
  </div>
  <div
    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorError-id"
  >
    Group is out of your permission scope
  </div>
</div>
`;

exports[`Storyshots Generics / ActionDialog default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Generics / AddressEdit default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;width:768px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="AddressEdit-root-id"
      >
        <div>
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
              data-shrink="true"
            >
              First Name
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                autocomplete="new-password"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="firstName"
                type="text"
                value="Elizabeth"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                >
                  <span>
                    First Name
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
              data-shrink="true"
            >
              Last Name
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                autocomplete="new-password"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="lastName"
                type="text"
                value="Vaughn"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                >
                  <span>
                    Last Name
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
      </div>
      <div
        class="FormSpacer-spacer-id"
      />
      <div
        class="AddressEdit-root-id"
      >
        <div>
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
              data-shrink="false"
            >
              Company
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                autocomplete="new-password"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="companyName"
                type="text"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id"
                >
                  <span>
                    Company
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
              data-shrink="false"
            >
              Phone
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                autocomplete="new-password"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="phone"
                type="text"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id"
                >
                  <span>
                    Phone
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
      </div>
      <div
        class="FormSpacer-spacer-id"
      />
      <div
        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
      >
        <label
          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
          data-shrink="true"
        >
          Address line 1
        </label>
        <div
          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
        >
          <input
            aria-invalid="false"
            autocomplete="new-password"
            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
            name="streetAddress1"
            type="text"
            value="419 Ruiz Orchard Apt. 199"
          />
          <fieldset
            aria-hidden="true"
            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
          >
            <legend
              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
            >
              <span>
                Address line 1
              </span>
            </legend>
          </fieldset>
        </div>
      </div>
      <div
        class="FormSpacer-spacer-id"
      />
      <div
        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
      >
        <label
          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
          data-shrink="false"
        >
          Address line 2
        </label>
        <div
          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
        >
          <input
            aria-invalid="false"
            autocomplete="new-password"
            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
            name="streetAddress2"
            type="text"
            value=""
          />
          <fieldset
            aria-hidden="true"
            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
          >
            <legend
              class="PrivateNotchedOutline-legendLabelled-id"
            >
              <span>
                Address line 2
              </span>
            </legend>
          </fieldset>
        </div>
      </div>
      <div
        class="FormSpacer-spacer-id"
      />
      <div
        class="AddressEdit-root-id"
      >
        <div>
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
              data-shrink="true"
            >
              City
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                autocomplete="new-password"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="city"
                type="text"
                value="Port Danielshire"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                >
                  <span>
                    City
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
              data-shrink="true"
            >
              ZIP / Postal code
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                autocomplete="new-password"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="postalCode"
                type="text"
                value="52203"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                >
                  <span>
                    ZIP / Postal code
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
      </div>
      <div
        class="FormSpacer-spacer-id"
      />
      <div
        class="AddressEdit-root-id"
      >
        <div>
          <div
            aria-expanded="false"
            aria-haspopup="listbox"
            aria-labelledby="downshift-63-label"
            class="SingleAutocompleteSelectField-container-id"
            data-test-id="address-edit-country-select-field"
            role="combobox"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                data-shrink="false"
              >
                Country
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              >
                <input
                  aria-autocomplete="list"
                  aria-invalid="false"
                  aria-labelledby="downshift-63-label"
                  autocomplete="off"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  id="downshift-63-input"
                  type="text"
                  value="Szwecja"
                />
                <div
                  aria-haspopup="true"
                  aria-label="open menu"
                  class="SingleAutocompleteSelectField-adornment-id"
                  data-toggle="true"
                  role="button"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </div>
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id"
                  >
                    <span>
                      Country
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
              data-shrink="false"
            >
              Country area
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                autocomplete="new-password"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="countryArea"
                type="text"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id"
                >
                  <span>
                    Country area
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / AddressFormatter default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <address
        style="font-style:inherit"
      >
        <p
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Elizabeth Vaughn
        </p>
        <p
          class="MuiTypography-root-id MuiTypography-body1-id"
        />
        <p
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          419 Ruiz Orchard Apt. 199
          <br />
        </p>
        <p
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
           52203 Port Danielshire
        </p>
        <p
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Szwecja
        </p>
      </address>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / AddressFormatter when loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <span
        class="Skeleton-skeleton-id"
        data-test-id="skeleton"
      >
        ‌
      </span>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Assign attributes dialog default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Generics / Assign attributes dialog errors 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Generics / Assign attributes dialog loading 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Generics / Assign product default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Generics / Autocomplete Menu default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        aria-expanded="false"
        aria-haspopup="listbox"
        aria-labelledby="downshift-64-label"
        class="AutocompleteSelectMenu-container-id"
        data-test-id="container-autocomplete-select"
        role="combobox"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
            data-shrink="true"
          >
            Autocomplete Menu
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              placeholder="Start typing to search ..."
              type="text"
              value="Item 1.2"
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
              >
                <span>
                  Autocomplete Menu
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Autocomplete Menu error 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        aria-expanded="false"
        aria-haspopup="listbox"
        aria-labelledby="downshift-66-label"
        class="AutocompleteSelectMenu-container-id"
        data-test-id="container-autocomplete-select"
        role="combobox"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
            data-shrink="true"
          >
            Autocomplete Menu
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="true"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              placeholder="Start typing to search ..."
              type="text"
              value="Item 1.2"
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
              >
                <span>
                  Autocomplete Menu
                </span>
              </legend>
            </fieldset>
          </div>
          <p
            class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
          >
            Generic form error
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Autocomplete Menu interactive 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          aria-expanded="false"
          aria-haspopup="listbox"
          aria-labelledby="downshift-67-label"
          class="AutocompleteSelectMenu-container-id"
          data-test-id="container-autocomplete-select"
          role="combobox"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
              data-shrink="true"
            >
              Autocomplete Menu
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                placeholder="Start typing to search ..."
                type="text"
                value="Item 1.2"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                >
                  <span>
                    Autocomplete Menu
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Autocomplete Menu loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        aria-expanded="false"
        aria-haspopup="listbox"
        aria-labelledby="downshift-65-label"
        class="AutocompleteSelectMenu-container-id"
        data-test-id="container-autocomplete-select"
        role="combobox"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
            data-shrink="true"
          >
            Autocomplete Menu
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              placeholder="Start typing to search ..."
              type="text"
              value="Item 1.2"
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
              >
                <span>
                  Autocomplete Menu
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Card menu default 1`] = `
<div
  style="padding:24px"
>
  <div>
    <button
      aria-haspopup="true"
      aria-label="More"
      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
      color="primary"
      data-test-id="show-more-button"
      tabindex="0"
      type="button"
    >
      <svg
        aria-hidden="true"
        class="MuiSvgIcon-root-id"
        focusable="false"
        viewBox="0 0 24 24"
      >
        <path
          clip-rule="evenodd"
          d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
          fill="currentColor"
          fill-rule="evenodd"
        />
      </svg>
    </button>
  </div>
</div>
`;

exports[`Storyshots Generics / Channels availability card default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Availability
        </span>
      </div>
      <div
        class="MuiCardHeader-action-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
          data-test-id="channels-availability-manage-button"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            Manage
          </span>
        </button>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
    >
      <div
        class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
      >
        Available at 2 out of 4 channels
      </div>
      <hr
        class="Hr-root-id ChannelsAvailabilityCard-hr-id"
      />
      <div
        class="ChannelsAvailabilityCard-channelItem-id"
      >
        <div
          class="ChannelsAvailabilityCard-channelName-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Channel1
          </div>
        </div>
      </div>
      <hr
        class="Hr-root-id ChannelsAvailabilityCard-hr-id"
      />
      <div
        class="ChannelsAvailabilityCard-channelItem-id"
      >
        <div
          class="ChannelsAvailabilityCard-channelName-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Channel2
          </div>
        </div>
      </div>
      <hr
        class="Hr-root-id ChannelsAvailabilityCard-hr-id"
      />
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Channels availability card with onChange 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Availability
        </span>
      </div>
      <div
        class="MuiCardHeader-action-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
          data-test-id="channels-availability-manage-button"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            Manage
          </span>
        </button>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
    >
      <div
        class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
      >
        Available at 2 out of 4 channels
      </div>
      <hr
        class="Hr-root-id ChannelsAvailabilityCard-hr-id"
      />
      <div
        class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
        data-test-id="channel-availability-item"
      >
        <div
          aria-disabled="false"
          aria-expanded="false"
          class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
          role="button"
          tabindex="0"
        >
          <div
            class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Channel1
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-caption-id"
            >
              available from 07/30/2020
            </div>
          </div>
          <div
            aria-disabled="false"
            aria-hidden="true"
            class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
          >
            <span
              class="MuiIconButton-label-id"
            >
              <svg
                data-test-id="expand-icon"
                fill="none"
                height="7"
                viewBox="0 0 10 7"
                width="10"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M1 1L5 5L9 1"
                  stroke="#28234A"
                  stroke-opacity="0.4"
                  stroke-width="2"
                />
              </svg>
            </span>
          </div>
        </div>
        <div
          class="MuiCollapse-container-id MuiCollapse-hidden-id"
          style="min-height:0px"
        >
          <div
            class="MuiCollapse-wrapper-id"
          >
            <div
              class="MuiCollapse-wrapperInner-id"
            >
              <div
                role="region"
              >
                <div
                  class="ChannelsAvailabilityCard-container-id"
                >
                  <div
                    class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                  >
                    <div
                      aria-label="isPublished"
                      class="MuiFormGroup-root-id"
                      role="radiogroup"
                    >
                      <label
                        class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                      >
                        <span
                          aria-disabled="false"
                          class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <input
                              checked=""
                              class="PrivateSwitchBase-input-id"
                              name="isPublished"
                              type="radio"
                              value="true"
                            />
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <circle
                                cx="12"
                                cy="12"
                                fill="currentColor"
                                r="12"
                              />
                              <circle
                                cx="12"
                                cy="12"
                                fill="var(--background-paper)"
                                r="5"
                              />
                            </svg>
                          </span>
                        </span>
                        <span
                          class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                        >
                          <p
                            class="ChannelsAvailabilityCard-label-id"
                          >
                            Visible
                          </p>
                        </span>
                      </label>
                      <label
                        class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                      >
                        <span
                          aria-disabled="false"
                          class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <input
                              class="PrivateSwitchBase-input-id"
                              name="isPublished"
                              type="radio"
                              value="false"
                            />
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <circle
                                cx="12"
                                cy="12"
                                fill="var(--background-paper)"
                                r="11"
                                stroke="currentColor"
                                stroke-width="2"
                              />
                            </svg>
                          </span>
                        </span>
                        <span
                          class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                        >
                          <p
                            class="ChannelsAvailabilityCard-label-id"
                          >
                            Hidden
                          </p>
                        </span>
                      </label>
                    </div>
                  </div>
                  <hr
                    class="Hr-root-id"
                  />
                  <div
                    class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                  >
                    <div
                      aria-label="channel:isAvailableForPurchase:123"
                      class="MuiFormGroup-root-id"
                      role="radiogroup"
                    >
                      <label
                        class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                      >
                        <span
                          aria-disabled="false"
                          class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <input
                              class="PrivateSwitchBase-input-id"
                              name="channel:isAvailableForPurchase:123"
                              type="radio"
                              value="true"
                            />
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <circle
                                cx="12"
                                cy="12"
                                fill="var(--background-paper)"
                                r="11"
                                stroke="currentColor"
                                stroke-width="2"
                              />
                            </svg>
                          </span>
                        </span>
                        <span
                          class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                        >
                          <p
                            class="ChannelsAvailabilityCard-label-id"
                          >
                            Available for purchase
                          </p>
                        </span>
                      </label>
                      <label
                        class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                      >
                        <span
                          aria-disabled="false"
                          class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <input
                              checked=""
                              class="PrivateSwitchBase-input-id"
                              name="channel:isAvailableForPurchase:123"
                              type="radio"
                              value="false"
                            />
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <circle
                                cx="12"
                                cy="12"
                                fill="currentColor"
                                r="12"
                              />
                              <circle
                                cx="12"
                                cy="12"
                                fill="var(--background-paper)"
                                r="5"
                              />
                            </svg>
                          </span>
                        </span>
                        <span
                          class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                        >
                          <p
                            class="ChannelsAvailabilityCard-label-id"
                          >
                            Unavailable for purchase
                          </p>
                        </span>
                      </label>
                    </div>
                  </div>
                  <div
                    class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
                  >
                    Set availability date
                  </div>
                  <hr
                    class="Hr-root-id"
                  />
                  <label
                    class="MuiFormControlLabel-root-id ChannelsAvailabilityCard-checkbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          name="channel:visibleInListings:123"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <svg
                            fill="none"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <rect
                              fill="currentColor"
                              height="23"
                              rx="1.5"
                              width="23"
                              x="0.5"
                              y="0.5"
                            />
                            <path
                              clip-rule="evenodd"
                              d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                              fill="var(--background-paper)"
                              fill-rule="evenodd"
                            />
                          </svg>
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      <p
                        class="ChannelsAvailabilityCard-label-id ChannelsAvailabilityCard-listingLabel-id"
                      >
                        Show in product listings
                      </p>
                      <span
                        class="ChannelsAvailabilityCard-secondLabel-id"
                      >
                        Disabling this checkbox will remove product from search and category pages. It will be available on collection pages.
                      </span>
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
        data-test-id="channel-availability-item"
      >
        <div
          aria-disabled="false"
          aria-expanded="false"
          class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
          role="button"
          tabindex="0"
        >
          <div
            class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Channel2
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-caption-id"
            >
              available from 07/30/2020
            </div>
          </div>
          <div
            aria-disabled="false"
            aria-hidden="true"
            class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
          >
            <span
              class="MuiIconButton-label-id"
            >
              <svg
                data-test-id="expand-icon"
                fill="none"
                height="7"
                viewBox="0 0 10 7"
                width="10"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M1 1L5 5L9 1"
                  stroke="#28234A"
                  stroke-opacity="0.4"
                  stroke-width="2"
                />
              </svg>
            </span>
          </div>
        </div>
        <div
          class="MuiCollapse-container-id MuiCollapse-hidden-id"
          style="min-height:0px"
        >
          <div
            class="MuiCollapse-wrapper-id"
          >
            <div
              class="MuiCollapse-wrapperInner-id"
            >
              <div
                role="region"
              >
                <div
                  class="ChannelsAvailabilityCard-container-id"
                >
                  <div
                    class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                  >
                    <div
                      aria-label="isPublished"
                      class="MuiFormGroup-root-id"
                      role="radiogroup"
                    >
                      <label
                        class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                      >
                        <span
                          aria-disabled="false"
                          class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <input
                              class="PrivateSwitchBase-input-id"
                              name="isPublished"
                              type="radio"
                              value="true"
                            />
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <circle
                                cx="12"
                                cy="12"
                                fill="var(--background-paper)"
                                r="11"
                                stroke="currentColor"
                                stroke-width="2"
                              />
                            </svg>
                          </span>
                        </span>
                        <span
                          class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                        >
                          <p
                            class="ChannelsAvailabilityCard-label-id"
                          >
                            Visible
                          </p>
                        </span>
                      </label>
                      <label
                        class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                      >
                        <span
                          aria-disabled="false"
                          class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <input
                              checked=""
                              class="PrivateSwitchBase-input-id"
                              name="isPublished"
                              type="radio"
                              value="false"
                            />
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <circle
                                cx="12"
                                cy="12"
                                fill="currentColor"
                                r="12"
                              />
                              <circle
                                cx="12"
                                cy="12"
                                fill="var(--background-paper)"
                                r="5"
                              />
                            </svg>
                          </span>
                        </span>
                        <span
                          class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                        >
                          <p
                            class="ChannelsAvailabilityCard-label-id"
                          >
                            Hidden
                          </p>
                          <span
                            class="ChannelsAvailabilityCard-secondLabel-id"
                          >
                            will become published on 07/30/2020
                          </span>
                        </span>
                      </label>
                    </div>
                  </div>
                  <div
                    class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
                  >
                    Set publication date
                  </div>
                  <hr
                    class="Hr-root-id"
                  />
                  <div
                    class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                  >
                    <div
                      aria-label="channel:isAvailableForPurchase:124"
                      class="MuiFormGroup-root-id"
                      role="radiogroup"
                    >
                      <label
                        class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                      >
                        <span
                          aria-disabled="false"
                          class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <input
                              class="PrivateSwitchBase-input-id"
                              name="channel:isAvailableForPurchase:124"
                              type="radio"
                              value="true"
                            />
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <circle
                                cx="12"
                                cy="12"
                                fill="var(--background-paper)"
                                r="11"
                                stroke="currentColor"
                                stroke-width="2"
                              />
                            </svg>
                          </span>
                        </span>
                        <span
                          class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                        >
                          <p
                            class="ChannelsAvailabilityCard-label-id"
                          >
                            Available for purchase
                          </p>
                        </span>
                      </label>
                      <label
                        class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                      >
                        <span
                          aria-disabled="false"
                          class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <input
                              checked=""
                              class="PrivateSwitchBase-input-id"
                              name="channel:isAvailableForPurchase:124"
                              type="radio"
                              value="false"
                            />
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <circle
                                cx="12"
                                cy="12"
                                fill="currentColor"
                                r="12"
                              />
                              <circle
                                cx="12"
                                cy="12"
                                fill="var(--background-paper)"
                                r="5"
                              />
                            </svg>
                          </span>
                        </span>
                        <span
                          class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                        >
                          <p
                            class="ChannelsAvailabilityCard-label-id"
                          >
                            Unavailable for purchase
                          </p>
                        </span>
                      </label>
                    </div>
                  </div>
                  <div
                    class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
                  >
                    Set availability date
                  </div>
                  <hr
                    class="Hr-root-id"
                  />
                  <label
                    class="MuiFormControlLabel-root-id ChannelsAvailabilityCard-checkbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          name="channel:visibleInListings:124"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <svg
                            fill="none"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <rect
                              fill="currentColor"
                              height="23"
                              rx="1.5"
                              width="23"
                              x="0.5"
                              y="0.5"
                            />
                            <path
                              clip-rule="evenodd"
                              d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                              fill="var(--background-paper)"
                              fill-rule="evenodd"
                            />
                          </svg>
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      <p
                        class="ChannelsAvailabilityCard-label-id ChannelsAvailabilityCard-listingLabel-id"
                      >
                        Show in product listings
                      </p>
                      <span
                        class="ChannelsAvailabilityCard-secondLabel-id"
                      >
                        Disabling this checkbox will remove product from search and category pages. It will be available on collection pages.
                      </span>
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / ChannelsAvailabilityDialog default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Generics / ChannelsAvailabilityDialog disabled 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Generics / ChannelsAvailabilityDialog with text 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Generics / ChannelsAvailabilityDropdown default 1`] = `
<div
  style="padding:24px"
>
  <div>
    <div
      aria-controls="availability-menu"
      aria-haspopup="true"
      role="button"
    >
      <div
        class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
      >
        <span
          class="MuiChip-label-id Pill-label-id"
        >
          3 Channels
        </span>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Checkbox checked 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <span
        aria-disabled="false"
        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
      >
        <span
          class="MuiIconButton-label-id"
        >
          <input
            checked=""
            class="PrivateSwitchBase-input-id"
            data-indeterminate="false"
            name="data"
            type="checkbox"
          />
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <svg
              fill="none"
              height="24"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <rect
                fill="currentColor"
                height="23"
                rx="1.5"
                width="23"
                x="0.5"
                y="0.5"
              />
              <path
                clip-rule="evenodd"
                d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                fill="var(--background-paper)"
                fill-rule="evenodd"
              />
            </svg>
          </svg>
        </span>
      </span>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Checkbox disabled 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <span
        aria-disabled="true"
        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
        tabindex="-1"
      >
        <span
          class="MuiIconButton-label-id"
        >
          <input
            class="PrivateSwitchBase-input-id"
            data-indeterminate="false"
            disabled=""
            name="data"
            type="checkbox"
          />
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <rect
              fill="transparent"
              height="22"
              rx="2"
              ry="2"
              stroke="currentColor"
              stroke-linejoin="round"
              stroke-width="2"
              width="22"
              x="1"
              y="1"
            />
          </svg>
        </span>
      </span>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Checkbox interactive 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <span
          aria-disabled="false"
          class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
        >
          <span
            class="MuiIconButton-label-id"
          >
            <input
              class="PrivateSwitchBase-input-id"
              data-indeterminate="false"
              name="data"
              type="checkbox"
            />
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <rect
                fill="transparent"
                height="22"
                rx="2"
                ry="2"
                stroke="currentColor"
                stroke-linejoin="round"
                stroke-width="2"
                width="22"
                x="1"
                y="1"
              />
            </svg>
          </span>
        </span>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Checkbox unchecked 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <span
        aria-disabled="false"
        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
      >
        <span
          class="MuiIconButton-label-id"
        >
          <input
            class="PrivateSwitchBase-input-id"
            data-indeterminate="false"
            name="data"
            type="checkbox"
          />
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <rect
              fill="transparent"
              height="22"
              rx="2"
              ry="2"
              stroke="currentColor"
              stroke-linejoin="round"
              stroke-width="2"
              width="22"
              x="1"
              y="1"
            />
          </svg>
        </span>
      </span>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Checkbox undeterminate 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <span
        aria-disabled="false"
        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiCheckbox-indeterminate-id MuiIconButton-colorPrimary-id"
      >
        <span
          class="MuiIconButton-label-id"
        >
          <input
            class="PrivateSwitchBase-input-id"
            data-indeterminate="true"
            name="data"
            type="checkbox"
          />
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <rect
              fill="currentColor"
              height="23"
              rx="1.5"
              width="23"
              x="0.5"
              y="0.5"
            />
            <rect
              fill="var(--background-paper)"
              height="4"
              rx="1.5"
              width="16"
              x="4"
              y="10"
            />
          </svg>
        </span>
      </span>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Chip default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="Chip-root-id"
      >
        <div
          class="MuiTypography-root-id Chip-label-id MuiTypography-caption-id"
        >
          Lorem Ipsum
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Chip with x 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="Chip-root-id"
      >
        <div
          class="MuiTypography-root-id Chip-label-id MuiTypography-caption-id"
        >
          Lorem Ipsum
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id Chip-closeIcon-id"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <path
              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
            />
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / ColorPicker default 1`] = `
<div
  style="margin:auto;overflow:visible;min-height:800px;width:400px;display:flex;justify-content:center;align-items:center"
>
  <div
    style="padding:24px"
  >
    <div
      class="ColorPicker-picker-id"
    >
      <div>
        <div
          class="w-color-interactive w-color-saturation ColorPicker-saturation-id"
          style="position:relative;inset:0;cursor:crosshair;background-image:linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, hsl(0, 100%, 50%));width:200px;height:200px;border-radius:0;touch-action:none"
          tabindex="0"
        >
          <div
            class="w-color-saturation-pointer "
            style="position:absolute;top:100%;left:0%"
          >
            <div
              class="w-color-saturation-fill"
              style="width:6px;height:6px;transform:translate(-3px, -3px);box-shadow:rgb(255 255 255) 0px 0px 0px 1.5px, rgb(0 0 0 / 30%) 0px 0px 1px 1px inset, rgb(0 0 0 / 40%) 0px 0px 1px 2px;border-radius:50%;background-color:hsla(0, 0%, 0%, 1)"
            />
          </div>
        </div>
      </div>
      <div
        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
      />
      <div>
        <div
          class="w-color-alpha w-color-alpha-vertical w-color-hue "
          style="border-radius:0;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==) left center;background-color:#fff;position:relative;width:16px;height:220px"
        >
          <div
            style="inset:0;position:absolute;background:linear-gradient(to bottom, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%);border-radius:0"
          />
          <div
            class="w-color-interactive"
            style="inset:0;z-index:1;position:absolute;touch-action:none"
            tabindex="0"
          >
            <div
              class="w-color-alpha-pointer "
              style="position:absolute;top:0%"
            >
              <div
                class="w-color-alpha-fill"
                style="width:18px;height:18px;transform:translate(-1px, -9px);box-shadow:rgb(0 0 0 / 37%) 0px 1px 4px 0px;border-radius:50%;background-color:rgb(248, 248, 248)"
              />
            </div>
          </div>
        </div>
      </div>
      <div
        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
      />
      <div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id ColorPicker-colorInput-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id MuiInputBase-adornedStart-id MuiOutlinedInput-adornedStart-id"
          >
            R
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedStart-id MuiOutlinedInput-inputAdornedStart-id"
              type="text"
              value="0"
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id ColorPicker-colorInput-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id MuiInputBase-adornedStart-id MuiOutlinedInput-adornedStart-id"
          >
            G
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedStart-id MuiOutlinedInput-inputAdornedStart-id"
              type="text"
              value="0"
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id ColorPicker-colorInput-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id MuiInputBase-adornedStart-id MuiOutlinedInput-adornedStart-id"
          >
            B
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedStart-id MuiOutlinedInput-inputAdornedStart-id"
              type="text"
              value="0"
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id ColorPicker-colorInput-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id MuiInputBase-adornedStart-id MuiOutlinedInput-adornedStart-id"
          >
            HEX
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedStart-id MuiOutlinedInput-inputAdornedStart-id"
              maxlength="6"
              pattern="[A-Za-z0-9]{6}"
              type="text"
              value="#000000"
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Column picker default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        style="display:flex;justify-content:center"
      >
        <div>
          <button
            class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiIconButton-label-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MacawIcon-root-id"
                fill="none"
                focusable="false"
                height="25"
                viewBox="0 0 24 25"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M9 3.002H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4m0-18v18m0-18h6m-6 18h6m0 0h4a2 2 0 0 0 2-2v-14a2 2 0 0 0-2-2h-4m0 18v-18"
                  stroke="currentColor"
                  stroke-width="1.5"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Column picker loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        style="display:flex;justify-content:center"
      >
        <div>
          <button
            class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiIconButton-label-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MacawIcon-root-id"
                fill="none"
                focusable="false"
                height="25"
                viewBox="0 0 24 25"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M9 3.002H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4m0-18v18m0-18h6m-6 18h6m0 0h4a2 2 0 0 0 2-2v-14a2 2 0 0 0-2-2h-4m0 18v-18"
                  stroke="currentColor"
                  stroke-width="1.5"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Date default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <time
        class=""
        datetime="2018-04-07"
        title="Apr 7, 2018"
      >
        4 months ago
      </time>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Date plain 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      Apr 7, 2018
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / DateTime default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <time
        class=""
        datetime="1523097884000"
        title="Apr 7, 2018 6:44 AM"
      >
        4 months ago
      </time>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / DateTime plain 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      Apr 7, 2018 6:44 AM
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Deletable Item default 1`] = `
<div
  style="padding:24px"
>
  <button
    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
    tabindex="0"
    type="button"
  >
    <svg
      aria-hidden="true"
      class="MuiSvgIcon-root-id MacawIcon-root-id"
      fill="none"
      focusable="false"
      height="24"
      viewBox="0 0 24 24"
      width="24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="1.5"
      />
    </svg>
  </button>
</div>
`;

exports[`Storyshots Generics / Delete filter tab default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Generics / EditableTableCell default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id"
                scope="col"
              >
                Some header
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id"
                scope="col"
              >
                Some header
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id"
                scope="col"
              >
                Some header
              </th>
            </tr>
          </thead>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                Some value
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id EditableTableCell-container-id"
              >
                <div
                  class="MuiTypography-root-id EditableTableCell-text-id MuiTypography-caption-id"
                >
                  Some editable text
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                Some value
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / ErrorMessageCard default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardContent-root-id"
        >
          <h2
            class="MuiTypography-root-id MuiTypography-h5-id"
          >
            Error
          </h2>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Loren ipsum dolor sit amet!
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / External Link default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <a
        class="ExternalLink-link-id"
        href="http://www.google.com"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
        >
          Link to google.com
        </div>
      </a>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / External Link new tab 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <a
        class="ExternalLink-link-id"
        href="http://www.google.com"
        target="_blank"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
        >
          Link to google.com
        </div>
      </a>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / File upload field default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div>
        <div>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
            data-test-id="button-upload-file"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Choose file
            </span>
          </button>
        </div>
      </div>
      <input
        class="FileUploadField-fileField-id"
        data-test-id="upload-file-input"
        id="fileUpload"
        name="country"
        placeholder="Select country"
        type="file"
      />
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / File upload field interactive 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div>
        <div>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
            data-test-id="button-upload-file"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Choose file
            </span>
          </button>
        </div>
      </div>
      <input
        class="FileUploadField-fileField-id"
        data-test-id="upload-file-input"
        id="fileUpload"
        type="file"
      />
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / File upload field with error 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div>
        <div>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
            data-test-id="button-upload-file"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Choose file
            </span>
          </button>
        </div>
        <div
          class="MuiTypography-root-id FileUploadField-errorText-id MuiTypography-caption-id"
        >
          Something went wrong
        </div>
      </div>
      <input
        class="FileUploadField-fileField-id"
        data-test-id="upload-file-input"
        id="fileUpload"
        name="country"
        placeholder="Select country"
        type="file"
      />
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / File upload field with ready to upload file 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div>
        <div
          class="FileUploadField-uploadFileContent-id"
        >
          <div
            class="FileUploadField-uploadFileName-id"
          >
            <a
              class="FileUploadField-fileUrl-id"
              target="blank"
            >
              some_file.png
            </a>
          </div>
          <button
            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
            color="primary"
            data-test-id="button-delete-file"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id"
              fill="none"
              focusable="false"
              height="24"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.5"
              />
            </svg>
          </button>
        </div>
      </div>
      <input
        class="FileUploadField-fileField-id"
        data-test-id="upload-file-input"
        id="fileUpload"
        name="country"
        placeholder="Select country"
        type="file"
      />
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / File upload field with uploaded file 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div>
        <div
          class="FileUploadField-uploadFileContent-id"
        >
          <div
            class="FileUploadField-uploadFileName-id"
          >
            <a
              class="FileUploadField-fileUrl-id"
              href="some_url_to_image.png"
              target="blank"
            >
              some_file_with_link.png
            </a>
          </div>
          <button
            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
            color="primary"
            data-test-id="button-delete-file"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id"
              fill="none"
              focusable="false"
              height="24"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.5"
              />
            </svg>
          </button>
        </div>
      </div>
      <input
        class="FileUploadField-fileField-id"
        data-test-id="upload-file-input"
        id="fileUpload"
        name="country"
        placeholder="Select country"
        type="file"
      />
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Filter default 1`] = `
<div
  style="padding:24px"
>
  <div
    style="margin:auto;width:400px"
  >
    <div
      class="MuiPaper-root-id MuiPaper-elevation8-id MuiPaper-rounded-id"
    >
      <form>
        <div
          class="FilterContentHeader-container-id"
        >
          <div
            class="MuiTypography-root-id FilterContentHeader-label-id MuiTypography-body1-id"
          >
            Filters
          </div>
          <div>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id FilterContentHeader-clear-id MuiButton-outlinedPrimary-id"
              data-test-id="clear"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Clear
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
              data-test-id="submit"
              tabindex="0"
              type="submit"
            >
              <span
                class="MuiButton-label-id"
              >
                Done
              </span>
            </button>
          </div>
        </div>
        <hr
          class="Hr-root-id"
        />
        <div
          class="MuiPaper-root-id MuiAccordion-root-id FilterContentExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          data-test-id="channel-availability-item-createdAt"
        >
          <div
            aria-disabled="false"
            aria-expanded="false"
            class="MuiButtonBase-root-id MuiAccordionSummary-root-id FilterContentExpanderSummary-root-id"
            role="button"
            tabindex="0"
          >
            <div
              class="MuiAccordionSummary-content-id FilterContentExpanderSummary-content-id"
            >
              <div
                class="FilterContentBodyNameField-container-id"
              >
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                    data-test-id="filter-group-active-createdAt"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        checked=""
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <svg
                          fill="none"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <rect
                            fill="currentColor"
                            height="23"
                            rx="1.5"
                            width="23"
                            x="0.5"
                            y="0.5"
                          />
                          <path
                            clip-rule="evenodd"
                            d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                            fill="var(--background-paper)"
                            fill-rule="evenodd"
                          />
                        </svg>
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Created At
                  </span>
                </label>
              </div>
            </div>
            <div
              aria-disabled="false"
              aria-hidden="true"
              class="MuiButtonBase-root-id MuiIconButton-root-id FilterContentExpander-btn-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  data-test-id="expand-icon"
                  fill="none"
                  height="7"
                  viewBox="0 0 10 7"
                  width="10"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M1 1L5 5L9 1"
                    stroke="#28234A"
                    stroke-opacity="0.4"
                    stroke-width="2"
                  />
                </svg>
              </span>
            </div>
          </div>
          <div
            class="MuiCollapse-container-id MuiCollapse-hidden-id"
            style="min-height:0px"
          >
            <div
              class="MuiCollapse-wrapper-id"
            >
              <div
                class="MuiCollapse-wrapperInner-id"
              >
                <div
                  role="region"
                >
                  <div
                    class="FilterContentBody-filterSettings-id"
                  >
                    <div
                      class="MuiFormControl-root-id SingleSelectField-formControl-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
                        data-shrink="true"
                      />
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id FilterContentBodyCommon-input-id SingleSelectField-noLabel-id"
                          role="button"
                          tabindex="0"
                        >
                          between
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="MULTIPLE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:143px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                    <div
                      class="FormSpacer-spacer-id"
                    />
                    <div
                      class="FilterContentBodyCommon-inputRange-id"
                    >
                      <div>
                        <svg
                          class="FilterContentBodyCommon-arrow-id"
                          fill="none"
                          height="21"
                          viewBox="0 0 18 21"
                          width="18"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            clip-rule="evenodd"
                            d="M13.5858 17.1357L-1.37065e-07 17.1357L-1.37065e-07 15L-1.37064e-07 0L2 -8.74228e-08L2 15.1357L13.5858 15.1357L11.8643 13.4142L13.2785 12L17.4142 16.1357L13.2785 20.2714L11.8643 18.8571L13.5858 17.1357Z"
                            fill="#3D3D3D"
                            fill-rule="evenodd"
                          />
                        </svg>
                      </div>
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                        data-test-id="filter-field-createdAt"
                        data-test-range-type="min"
                      >
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterContentBodyCommon-input-id"
                            name="createdAt_min"
                            type="date"
                            value="2019-09-09"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="PrivateNotchedOutline-legend-id"
                              style="width:0.01px"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                    <div
                      class="FilterContentBodyCommon-inputRange-id"
                    >
                      <div
                        class="FilterContentBodyCommon-spacer-id"
                      />
                      <span
                        class="FilterContentBodyCommon-andLabel-id"
                      >
                        and
                      </span>
                    </div>
                    <div
                      class="FilterContentBodyCommon-inputRange-id"
                    >
                      <div
                        class="FilterContentBodyCommon-spacer-id"
                      />
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                        data-test-id="filter-field-createdAt"
                        data-test-range-type="max"
                      >
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterContentBodyCommon-input-id"
                            name="createdAt_max"
                            type="date"
                            value="2019-10-23"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="PrivateNotchedOutline-legend-id"
                              style="width:0.01px"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiAccordion-root-id FilterContentExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          data-test-id="channel-availability-item-metadata"
        >
          <div
            aria-disabled="false"
            aria-expanded="false"
            class="MuiButtonBase-root-id MuiAccordionSummary-root-id FilterContentExpanderSummary-root-id"
            role="button"
            tabindex="0"
          >
            <div
              class="MuiAccordionSummary-content-id FilterContentExpanderSummary-content-id"
            >
              <div
                class="FilterContentBodyNameField-container-id"
              >
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    data-test-id="filter-group-active-metadata"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Metadata
                  </span>
                </label>
              </div>
            </div>
            <div
              aria-disabled="false"
              aria-hidden="true"
              class="MuiButtonBase-root-id MuiIconButton-root-id FilterContentExpander-btn-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  data-test-id="expand-icon"
                  fill="none"
                  height="7"
                  viewBox="0 0 10 7"
                  width="10"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M1 1L5 5L9 1"
                    stroke="#28234A"
                    stroke-opacity="0.4"
                    stroke-width="2"
                  />
                </svg>
              </span>
            </div>
          </div>
          <div
            class="MuiCollapse-container-id MuiCollapse-hidden-id"
            style="min-height:0px"
          >
            <div
              class="MuiCollapse-wrapper-id"
            >
              <div
                class="MuiCollapse-wrapperInner-id"
              >
                <div
                  role="region"
                >
                  <div
                    class="FilterContentBody-filterSettings-id"
                  >
                    <div
                      class="FilterKeyValueField-formWrapper-id"
                    >
                      <div
                        class="FilterKeyValueField-fieldsWrapper-id"
                      >
                        <div
                          class="FilterKeyValueField-metadataField-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                              data-shrink="true"
                            >
                              Key
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                                name="metadata"
                                type="text"
                                value="123"
                              />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                >
                                  <span>
                                    Key
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                              data-shrink="true"
                            >
                              Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                                name="metadata"
                                type="text"
                                value="123"
                              />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                >
                                  <span>
                                    Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                          <button
                            class="MuiButtonBase-root-id IconButton-secondary-id FilterKeyValueField-deleteButton-id IconButton-hoverOutline-id"
                            tabindex="0"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id MacawIcon-root-id"
                              fill="none"
                              focusable="false"
                              height="24"
                              viewBox="0 0 24 24"
                              width="24"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                                stroke="currentColor"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="1.5"
                              />
                            </svg>
                          </button>
                        </div>
                      </div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id FilterKeyValueField-addButton-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Add more
                        </span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiAccordion-root-id FilterContentExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          data-test-id="channel-availability-item-multiplOptions"
        >
          <div
            aria-disabled="false"
            aria-expanded="false"
            class="MuiButtonBase-root-id MuiAccordionSummary-root-id FilterContentExpanderSummary-root-id"
            role="button"
            tabindex="0"
          >
            <div
              class="MuiAccordionSummary-content-id FilterContentExpanderSummary-content-id"
            >
              <div
                class="FilterContentBodyNameField-container-id"
              >
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    data-test-id="filter-group-active-multiplOptions"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Multiple Options
                  </span>
                </label>
              </div>
            </div>
            <div
              aria-disabled="false"
              aria-hidden="true"
              class="MuiButtonBase-root-id MuiIconButton-root-id FilterContentExpander-btn-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  data-test-id="expand-icon"
                  fill="none"
                  height="7"
                  viewBox="0 0 10 7"
                  width="10"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M1 1L5 5L9 1"
                    stroke="#28234A"
                    stroke-opacity="0.4"
                    stroke-width="2"
                  />
                </svg>
              </span>
            </div>
          </div>
          <div
            class="MuiCollapse-container-id MuiCollapse-hidden-id"
            style="min-height:0px"
          >
            <div
              class="MuiCollapse-wrapper-id"
            >
              <div
                class="MuiCollapse-wrapperInner-id"
              >
                <div
                  role="region"
                >
                  <div
                    class="FilterContentBody-filterSettings-id"
                  >
                    <div
                      class="FilterOptionField-root-id"
                      data-test-id="filter-field-multiplOptions"
                    >
                      <div
                        class="FilterOptionField-option-id"
                      >
                        <label
                          class="MuiFormControlLabel-root-id"
                        >
                          <span
                            aria-disabled="false"
                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                            data-test-id="filter-option-val1"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <input
                                checked=""
                                class="PrivateSwitchBase-input-id"
                                data-indeterminate="false"
                                name="multiplOptions"
                                type="checkbox"
                              />
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <svg
                                  fill="none"
                                  height="24"
                                  viewBox="0 0 24 24"
                                  width="24"
                                  xmlns="http://www.w3.org/2000/svg"
                                >
                                  <rect
                                    fill="currentColor"
                                    height="23"
                                    rx="1.5"
                                    width="23"
                                    x="0.5"
                                    y="0.5"
                                  />
                                  <path
                                    clip-rule="evenodd"
                                    d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                                    fill="var(--background-paper)"
                                    fill-rule="evenodd"
                                  />
                                </svg>
                              </svg>
                            </span>
                          </span>
                          <span
                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                          >
                            Value 1
                          </span>
                        </label>
                      </div>
                      <div
                        class="FilterOptionField-option-id"
                      >
                        <label
                          class="MuiFormControlLabel-root-id"
                        >
                          <span
                            aria-disabled="false"
                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                            data-test-id="filter-option-val2"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <input
                                checked=""
                                class="PrivateSwitchBase-input-id"
                                data-indeterminate="false"
                                name="multiplOptions"
                                type="checkbox"
                              />
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <svg
                                  fill="none"
                                  height="24"
                                  viewBox="0 0 24 24"
                                  width="24"
                                  xmlns="http://www.w3.org/2000/svg"
                                >
                                  <rect
                                    fill="currentColor"
                                    height="23"
                                    rx="1.5"
                                    width="23"
                                    x="0.5"
                                    y="0.5"
                                  />
                                  <path
                                    clip-rule="evenodd"
                                    d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                                    fill="var(--background-paper)"
                                    fill-rule="evenodd"
                                  />
                                </svg>
                              </svg>
                            </span>
                          </span>
                          <span
                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                          >
                            Value 2
                          </span>
                        </label>
                      </div>
                      <div
                        class="FilterOptionField-option-id"
                      >
                        <label
                          class="MuiFormControlLabel-root-id"
                        >
                          <span
                            aria-disabled="false"
                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                            data-test-id="filter-option-val3"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <input
                                class="PrivateSwitchBase-input-id"
                                data-indeterminate="false"
                                name="multiplOptions"
                                type="checkbox"
                              />
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <rect
                                  fill="transparent"
                                  height="22"
                                  rx="2"
                                  ry="2"
                                  stroke="currentColor"
                                  stroke-linejoin="round"
                                  stroke-width="2"
                                  width="22"
                                  x="1"
                                  y="1"
                                />
                              </svg>
                            </span>
                          </span>
                          <span
                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                          >
                            Value 3
                          </span>
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiAccordion-root-id FilterContentExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          data-test-id="channel-availability-item-price"
        >
          <div
            aria-disabled="false"
            aria-expanded="false"
            class="MuiButtonBase-root-id MuiAccordionSummary-root-id FilterContentExpanderSummary-root-id"
            role="button"
            tabindex="0"
          >
            <div
              class="MuiAccordionSummary-content-id FilterContentExpanderSummary-content-id"
            >
              <div
                class="FilterContentBodyNameField-container-id"
              >
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    data-test-id="filter-group-active-price"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Price
                  </span>
                </label>
              </div>
            </div>
            <div
              aria-disabled="false"
              aria-hidden="true"
              class="MuiButtonBase-root-id MuiIconButton-root-id FilterContentExpander-btn-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  data-test-id="expand-icon"
                  fill="none"
                  height="7"
                  viewBox="0 0 10 7"
                  width="10"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M1 1L5 5L9 1"
                    stroke="#28234A"
                    stroke-opacity="0.4"
                    stroke-width="2"
                  />
                </svg>
              </span>
            </div>
          </div>
          <div
            class="MuiCollapse-container-id MuiCollapse-hidden-id"
            style="min-height:0px"
          >
            <div
              class="MuiCollapse-wrapper-id"
            >
              <div
                class="MuiCollapse-wrapperInner-id"
              >
                <div
                  role="region"
                >
                  <div
                    class="FilterContentBody-filterSettings-id"
                  >
                    <div
                      class="MuiFormControl-root-id SingleSelectField-formControl-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
                        data-shrink="true"
                      />
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id FilterContentBodyCommon-input-id SingleSelectField-noLabel-id"
                          role="button"
                          tabindex="0"
                        >
                          between
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="MULTIPLE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:143px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                    <div
                      class="FormSpacer-spacer-id"
                    />
                    <div
                      class="FilterContentBodyCommon-inputRange-id"
                    >
                      <div>
                        <svg
                          class="FilterContentBodyCommon-arrow-id"
                          fill="none"
                          height="21"
                          viewBox="0 0 18 21"
                          width="18"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            clip-rule="evenodd"
                            d="M13.5858 17.1357L-1.37065e-07 17.1357L-1.37065e-07 15L-1.37064e-07 0L2 -8.74228e-08L2 15.1357L13.5858 15.1357L11.8643 13.4142L13.2785 12L17.4142 16.1357L13.2785 20.2714L11.8643 18.8571L13.5858 17.1357Z"
                            fill="#3D3D3D"
                            fill-rule="evenodd"
                          />
                        </svg>
                      </div>
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                        data-test-id="filter-field-price"
                        data-test-range-type="min"
                      >
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterContentBodyCommon-input-id"
                            name="price_min"
                            type="number"
                            value="20.00"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="PrivateNotchedOutline-legend-id"
                              style="width:0.01px"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                    <div
                      class="FilterContentBodyCommon-inputRange-id"
                    >
                      <div
                        class="FilterContentBodyCommon-spacer-id"
                      />
                      <span
                        class="FilterContentBodyCommon-andLabel-id"
                      >
                        and
                      </span>
                    </div>
                    <div
                      class="FilterContentBodyCommon-inputRange-id"
                    >
                      <div
                        class="FilterContentBodyCommon-spacer-id"
                      />
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                        data-test-id="filter-field-price"
                        data-test-range-type="max"
                      >
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterContentBodyCommon-input-id"
                            name="price_max"
                            type="number"
                            value="100.00"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="PrivateNotchedOutline-legend-id"
                              style="width:0.01px"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiAccordion-root-id FilterContentExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          data-test-id="channel-availability-item-status"
        >
          <div
            aria-disabled="false"
            aria-expanded="false"
            class="MuiButtonBase-root-id MuiAccordionSummary-root-id FilterContentExpanderSummary-root-id"
            role="button"
            tabindex="0"
          >
            <div
              class="MuiAccordionSummary-content-id FilterContentExpanderSummary-content-id"
            >
              <div
                class="FilterContentBodyNameField-container-id"
              >
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                    data-test-id="filter-group-active-status"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        checked=""
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <svg
                          fill="none"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <rect
                            fill="currentColor"
                            height="23"
                            rx="1.5"
                            width="23"
                            x="0.5"
                            y="0.5"
                          />
                          <path
                            clip-rule="evenodd"
                            d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                            fill="var(--background-paper)"
                            fill-rule="evenodd"
                          />
                        </svg>
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Status
                  </span>
                </label>
              </div>
            </div>
            <div
              aria-disabled="false"
              aria-hidden="true"
              class="MuiButtonBase-root-id MuiIconButton-root-id FilterContentExpander-btn-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  data-test-id="expand-icon"
                  fill="none"
                  height="7"
                  viewBox="0 0 10 7"
                  width="10"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M1 1L5 5L9 1"
                    stroke="#28234A"
                    stroke-opacity="0.4"
                    stroke-width="2"
                  />
                </svg>
              </span>
            </div>
          </div>
          <div
            class="MuiCollapse-container-id MuiCollapse-hidden-id"
            style="min-height:0px"
          >
            <div
              class="MuiCollapse-wrapper-id"
            >
              <div
                class="MuiCollapse-wrapperInner-id"
              >
                <div
                  role="region"
                >
                  <div
                    class="FilterContentBody-filterSettings-id"
                  >
                    <div
                      class="FilterOptionField-root-id"
                      data-test-id="filter-field-status"
                    >
                      <div
                        class="FilterOptionField-option-id FilterOptionField-optionRadio-id"
                      >
                        <label
                          class="MuiFormControlLabel-root-id"
                        >
                          <span
                            aria-disabled="false"
                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                            data-test-id="filter-option-val1"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <input
                                checked=""
                                class="PrivateSwitchBase-input-id"
                                name="status"
                                type="radio"
                              />
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <circle
                                  cx="12"
                                  cy="12"
                                  fill="currentColor"
                                  r="12"
                                />
                                <circle
                                  cx="12"
                                  cy="12"
                                  fill="var(--background-paper)"
                                  r="5"
                                />
                              </svg>
                            </span>
                          </span>
                          <span
                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                          >
                            Value 1
                          </span>
                        </label>
                      </div>
                      <div
                        class="FilterOptionField-option-id FilterOptionField-optionRadio-id"
                      >
                        <label
                          class="MuiFormControlLabel-root-id"
                        >
                          <span
                            aria-disabled="false"
                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                            data-test-id="filter-option-val2"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <input
                                class="PrivateSwitchBase-input-id"
                                name="status"
                                type="radio"
                              />
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <circle
                                  cx="12"
                                  cy="12"
                                  fill="var(--background-paper)"
                                  r="11"
                                  stroke="currentColor"
                                  stroke-width="2"
                                />
                              </svg>
                            </span>
                          </span>
                          <span
                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                          >
                            Value 2
                          </span>
                        </label>
                      </div>
                      <div
                        class="FilterOptionField-option-id FilterOptionField-optionRadio-id"
                      >
                        <label
                          class="MuiFormControlLabel-root-id"
                        >
                          <span
                            aria-disabled="false"
                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                            data-test-id="filter-option-val3"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <input
                                class="PrivateSwitchBase-input-id"
                                name="status"
                                type="radio"
                              />
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <circle
                                  cx="12"
                                  cy="12"
                                  fill="var(--background-paper)"
                                  r="11"
                                  stroke="currentColor"
                                  stroke-width="2"
                                />
                              </svg>
                            </span>
                          </span>
                          <span
                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                          >
                            Value 3
                          </span>
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Filter interactive 1`] = `
<div
  style="padding:24px"
>
  <div
    style="margin:auto;width:400px"
  >
    <div
      class="MuiPaper-root-id MuiPaper-elevation8-id MuiPaper-rounded-id"
    >
      <form>
        <div
          class="FilterContentHeader-container-id"
        >
          <div
            class="MuiTypography-root-id FilterContentHeader-label-id MuiTypography-body1-id"
          >
            Filters
          </div>
          <div>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id FilterContentHeader-clear-id MuiButton-outlinedPrimary-id"
              data-test-id="clear"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Clear
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
              data-test-id="submit"
              tabindex="0"
              type="submit"
            >
              <span
                class="MuiButton-label-id"
              >
                Done
              </span>
            </button>
          </div>
        </div>
        <hr
          class="Hr-root-id"
        />
        <div
          class="MuiPaper-root-id MuiAccordion-root-id FilterContentExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          data-test-id="channel-availability-item-createdAt"
        >
          <div
            aria-disabled="false"
            aria-expanded="false"
            class="MuiButtonBase-root-id MuiAccordionSummary-root-id FilterContentExpanderSummary-root-id"
            role="button"
            tabindex="0"
          >
            <div
              class="MuiAccordionSummary-content-id FilterContentExpanderSummary-content-id"
            >
              <div
                class="FilterContentBodyNameField-container-id"
              >
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                    data-test-id="filter-group-active-createdAt"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        checked=""
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <svg
                          fill="none"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <rect
                            fill="currentColor"
                            height="23"
                            rx="1.5"
                            width="23"
                            x="0.5"
                            y="0.5"
                          />
                          <path
                            clip-rule="evenodd"
                            d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                            fill="var(--background-paper)"
                            fill-rule="evenodd"
                          />
                        </svg>
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Created At
                  </span>
                </label>
              </div>
            </div>
            <div
              aria-disabled="false"
              aria-hidden="true"
              class="MuiButtonBase-root-id MuiIconButton-root-id FilterContentExpander-btn-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  data-test-id="expand-icon"
                  fill="none"
                  height="7"
                  viewBox="0 0 10 7"
                  width="10"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M1 1L5 5L9 1"
                    stroke="#28234A"
                    stroke-opacity="0.4"
                    stroke-width="2"
                  />
                </svg>
              </span>
            </div>
          </div>
          <div
            class="MuiCollapse-container-id MuiCollapse-hidden-id"
            style="min-height:0px"
          >
            <div
              class="MuiCollapse-wrapper-id"
            >
              <div
                class="MuiCollapse-wrapperInner-id"
              >
                <div
                  role="region"
                >
                  <div
                    class="FilterContentBody-filterSettings-id"
                  >
                    <div
                      class="MuiFormControl-root-id SingleSelectField-formControl-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
                        data-shrink="true"
                      />
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id FilterContentBodyCommon-input-id SingleSelectField-noLabel-id"
                          role="button"
                          tabindex="0"
                        >
                          between
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="MULTIPLE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:143px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                    <div
                      class="FormSpacer-spacer-id"
                    />
                    <div
                      class="FilterContentBodyCommon-inputRange-id"
                    >
                      <div>
                        <svg
                          class="FilterContentBodyCommon-arrow-id"
                          fill="none"
                          height="21"
                          viewBox="0 0 18 21"
                          width="18"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            clip-rule="evenodd"
                            d="M13.5858 17.1357L-1.37065e-07 17.1357L-1.37065e-07 15L-1.37064e-07 0L2 -8.74228e-08L2 15.1357L13.5858 15.1357L11.8643 13.4142L13.2785 12L17.4142 16.1357L13.2785 20.2714L11.8643 18.8571L13.5858 17.1357Z"
                            fill="#3D3D3D"
                            fill-rule="evenodd"
                          />
                        </svg>
                      </div>
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                        data-test-id="filter-field-createdAt"
                        data-test-range-type="min"
                      >
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterContentBodyCommon-input-id"
                            name="createdAt_min"
                            type="date"
                            value="2019-09-09"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="PrivateNotchedOutline-legend-id"
                              style="width:0.01px"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                    <div
                      class="FilterContentBodyCommon-inputRange-id"
                    >
                      <div
                        class="FilterContentBodyCommon-spacer-id"
                      />
                      <span
                        class="FilterContentBodyCommon-andLabel-id"
                      >
                        and
                      </span>
                    </div>
                    <div
                      class="FilterContentBodyCommon-inputRange-id"
                    >
                      <div
                        class="FilterContentBodyCommon-spacer-id"
                      />
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                        data-test-id="filter-field-createdAt"
                        data-test-range-type="max"
                      >
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterContentBodyCommon-input-id"
                            name="createdAt_max"
                            type="date"
                            value="2019-10-23"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="PrivateNotchedOutline-legend-id"
                              style="width:0.01px"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiAccordion-root-id FilterContentExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          data-test-id="channel-availability-item-metadata"
        >
          <div
            aria-disabled="false"
            aria-expanded="false"
            class="MuiButtonBase-root-id MuiAccordionSummary-root-id FilterContentExpanderSummary-root-id"
            role="button"
            tabindex="0"
          >
            <div
              class="MuiAccordionSummary-content-id FilterContentExpanderSummary-content-id"
            >
              <div
                class="FilterContentBodyNameField-container-id"
              >
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    data-test-id="filter-group-active-metadata"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Metadata
                  </span>
                </label>
              </div>
            </div>
            <div
              aria-disabled="false"
              aria-hidden="true"
              class="MuiButtonBase-root-id MuiIconButton-root-id FilterContentExpander-btn-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  data-test-id="expand-icon"
                  fill="none"
                  height="7"
                  viewBox="0 0 10 7"
                  width="10"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M1 1L5 5L9 1"
                    stroke="#28234A"
                    stroke-opacity="0.4"
                    stroke-width="2"
                  />
                </svg>
              </span>
            </div>
          </div>
          <div
            class="MuiCollapse-container-id MuiCollapse-hidden-id"
            style="min-height:0px"
          >
            <div
              class="MuiCollapse-wrapper-id"
            >
              <div
                class="MuiCollapse-wrapperInner-id"
              >
                <div
                  role="region"
                >
                  <div
                    class="FilterContentBody-filterSettings-id"
                  >
                    <div
                      class="FilterKeyValueField-formWrapper-id"
                    >
                      <div
                        class="FilterKeyValueField-fieldsWrapper-id"
                      >
                        <div
                          class="FilterKeyValueField-metadataField-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                              data-shrink="true"
                            >
                              Key
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                                name="metadata"
                                type="text"
                                value="123"
                              />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                >
                                  <span>
                                    Key
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                              data-shrink="true"
                            >
                              Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                                name="metadata"
                                type="text"
                                value="123"
                              />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                >
                                  <span>
                                    Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                          <button
                            class="MuiButtonBase-root-id IconButton-secondary-id FilterKeyValueField-deleteButton-id IconButton-hoverOutline-id"
                            tabindex="0"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id MacawIcon-root-id"
                              fill="none"
                              focusable="false"
                              height="24"
                              viewBox="0 0 24 24"
                              width="24"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                                stroke="currentColor"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="1.5"
                              />
                            </svg>
                          </button>
                        </div>
                      </div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id FilterKeyValueField-addButton-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Add more
                        </span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiAccordion-root-id FilterContentExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          data-test-id="channel-availability-item-multiplOptions"
        >
          <div
            aria-disabled="false"
            aria-expanded="false"
            class="MuiButtonBase-root-id MuiAccordionSummary-root-id FilterContentExpanderSummary-root-id"
            role="button"
            tabindex="0"
          >
            <div
              class="MuiAccordionSummary-content-id FilterContentExpanderSummary-content-id"
            >
              <div
                class="FilterContentBodyNameField-container-id"
              >
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    data-test-id="filter-group-active-multiplOptions"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Multiple Options
                  </span>
                </label>
              </div>
            </div>
            <div
              aria-disabled="false"
              aria-hidden="true"
              class="MuiButtonBase-root-id MuiIconButton-root-id FilterContentExpander-btn-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  data-test-id="expand-icon"
                  fill="none"
                  height="7"
                  viewBox="0 0 10 7"
                  width="10"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M1 1L5 5L9 1"
                    stroke="#28234A"
                    stroke-opacity="0.4"
                    stroke-width="2"
                  />
                </svg>
              </span>
            </div>
          </div>
          <div
            class="MuiCollapse-container-id MuiCollapse-hidden-id"
            style="min-height:0px"
          >
            <div
              class="MuiCollapse-wrapper-id"
            >
              <div
                class="MuiCollapse-wrapperInner-id"
              >
                <div
                  role="region"
                >
                  <div
                    class="FilterContentBody-filterSettings-id"
                  >
                    <div
                      class="FilterOptionField-root-id"
                      data-test-id="filter-field-multiplOptions"
                    >
                      <div
                        class="FilterOptionField-option-id"
                      >
                        <label
                          class="MuiFormControlLabel-root-id"
                        >
                          <span
                            aria-disabled="false"
                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                            data-test-id="filter-option-val1"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <input
                                checked=""
                                class="PrivateSwitchBase-input-id"
                                data-indeterminate="false"
                                name="multiplOptions"
                                type="checkbox"
                              />
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <svg
                                  fill="none"
                                  height="24"
                                  viewBox="0 0 24 24"
                                  width="24"
                                  xmlns="http://www.w3.org/2000/svg"
                                >
                                  <rect
                                    fill="currentColor"
                                    height="23"
                                    rx="1.5"
                                    width="23"
                                    x="0.5"
                                    y="0.5"
                                  />
                                  <path
                                    clip-rule="evenodd"
                                    d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                                    fill="var(--background-paper)"
                                    fill-rule="evenodd"
                                  />
                                </svg>
                              </svg>
                            </span>
                          </span>
                          <span
                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                          >
                            Value 1
                          </span>
                        </label>
                      </div>
                      <div
                        class="FilterOptionField-option-id"
                      >
                        <label
                          class="MuiFormControlLabel-root-id"
                        >
                          <span
                            aria-disabled="false"
                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                            data-test-id="filter-option-val2"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <input
                                checked=""
                                class="PrivateSwitchBase-input-id"
                                data-indeterminate="false"
                                name="multiplOptions"
                                type="checkbox"
                              />
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <svg
                                  fill="none"
                                  height="24"
                                  viewBox="0 0 24 24"
                                  width="24"
                                  xmlns="http://www.w3.org/2000/svg"
                                >
                                  <rect
                                    fill="currentColor"
                                    height="23"
                                    rx="1.5"
                                    width="23"
                                    x="0.5"
                                    y="0.5"
                                  />
                                  <path
                                    clip-rule="evenodd"
                                    d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                                    fill="var(--background-paper)"
                                    fill-rule="evenodd"
                                  />
                                </svg>
                              </svg>
                            </span>
                          </span>
                          <span
                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                          >
                            Value 2
                          </span>
                        </label>
                      </div>
                      <div
                        class="FilterOptionField-option-id"
                      >
                        <label
                          class="MuiFormControlLabel-root-id"
                        >
                          <span
                            aria-disabled="false"
                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                            data-test-id="filter-option-val3"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <input
                                class="PrivateSwitchBase-input-id"
                                data-indeterminate="false"
                                name="multiplOptions"
                                type="checkbox"
                              />
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <rect
                                  fill="transparent"
                                  height="22"
                                  rx="2"
                                  ry="2"
                                  stroke="currentColor"
                                  stroke-linejoin="round"
                                  stroke-width="2"
                                  width="22"
                                  x="1"
                                  y="1"
                                />
                              </svg>
                            </span>
                          </span>
                          <span
                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                          >
                            Value 3
                          </span>
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiAccordion-root-id FilterContentExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          data-test-id="channel-availability-item-price"
        >
          <div
            aria-disabled="false"
            aria-expanded="false"
            class="MuiButtonBase-root-id MuiAccordionSummary-root-id FilterContentExpanderSummary-root-id"
            role="button"
            tabindex="0"
          >
            <div
              class="MuiAccordionSummary-content-id FilterContentExpanderSummary-content-id"
            >
              <div
                class="FilterContentBodyNameField-container-id"
              >
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    data-test-id="filter-group-active-price"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Price
                  </span>
                </label>
              </div>
            </div>
            <div
              aria-disabled="false"
              aria-hidden="true"
              class="MuiButtonBase-root-id MuiIconButton-root-id FilterContentExpander-btn-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  data-test-id="expand-icon"
                  fill="none"
                  height="7"
                  viewBox="0 0 10 7"
                  width="10"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M1 1L5 5L9 1"
                    stroke="#28234A"
                    stroke-opacity="0.4"
                    stroke-width="2"
                  />
                </svg>
              </span>
            </div>
          </div>
          <div
            class="MuiCollapse-container-id MuiCollapse-hidden-id"
            style="min-height:0px"
          >
            <div
              class="MuiCollapse-wrapper-id"
            >
              <div
                class="MuiCollapse-wrapperInner-id"
              >
                <div
                  role="region"
                >
                  <div
                    class="FilterContentBody-filterSettings-id"
                  >
                    <div
                      class="MuiFormControl-root-id SingleSelectField-formControl-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
                        data-shrink="true"
                      />
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id FilterContentBodyCommon-input-id SingleSelectField-noLabel-id"
                          role="button"
                          tabindex="0"
                        >
                          between
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="MULTIPLE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:143px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                    <div
                      class="FormSpacer-spacer-id"
                    />
                    <div
                      class="FilterContentBodyCommon-inputRange-id"
                    >
                      <div>
                        <svg
                          class="FilterContentBodyCommon-arrow-id"
                          fill="none"
                          height="21"
                          viewBox="0 0 18 21"
                          width="18"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            clip-rule="evenodd"
                            d="M13.5858 17.1357L-1.37065e-07 17.1357L-1.37065e-07 15L-1.37064e-07 0L2 -8.74228e-08L2 15.1357L13.5858 15.1357L11.8643 13.4142L13.2785 12L17.4142 16.1357L13.2785 20.2714L11.8643 18.8571L13.5858 17.1357Z"
                            fill="#3D3D3D"
                            fill-rule="evenodd"
                          />
                        </svg>
                      </div>
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                        data-test-id="filter-field-price"
                        data-test-range-type="min"
                      >
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterContentBodyCommon-input-id"
                            name="price_min"
                            type="number"
                            value="20.00"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="PrivateNotchedOutline-legend-id"
                              style="width:0.01px"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                    <div
                      class="FilterContentBodyCommon-inputRange-id"
                    >
                      <div
                        class="FilterContentBodyCommon-spacer-id"
                      />
                      <span
                        class="FilterContentBodyCommon-andLabel-id"
                      >
                        and
                      </span>
                    </div>
                    <div
                      class="FilterContentBodyCommon-inputRange-id"
                    >
                      <div
                        class="FilterContentBodyCommon-spacer-id"
                      />
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                        data-test-id="filter-field-price"
                        data-test-range-type="max"
                      >
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterContentBodyCommon-input-id"
                            name="price_max"
                            type="number"
                            value="100.00"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="PrivateNotchedOutline-legend-id"
                              style="width:0.01px"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiAccordion-root-id FilterContentExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          data-test-id="channel-availability-item-status"
        >
          <div
            aria-disabled="false"
            aria-expanded="false"
            class="MuiButtonBase-root-id MuiAccordionSummary-root-id FilterContentExpanderSummary-root-id"
            role="button"
            tabindex="0"
          >
            <div
              class="MuiAccordionSummary-content-id FilterContentExpanderSummary-content-id"
            >
              <div
                class="FilterContentBodyNameField-container-id"
              >
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                    data-test-id="filter-group-active-status"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        checked=""
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <svg
                          fill="none"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <rect
                            fill="currentColor"
                            height="23"
                            rx="1.5"
                            width="23"
                            x="0.5"
                            y="0.5"
                          />
                          <path
                            clip-rule="evenodd"
                            d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                            fill="var(--background-paper)"
                            fill-rule="evenodd"
                          />
                        </svg>
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Status
                  </span>
                </label>
              </div>
            </div>
            <div
              aria-disabled="false"
              aria-hidden="true"
              class="MuiButtonBase-root-id MuiIconButton-root-id FilterContentExpander-btn-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  data-test-id="expand-icon"
                  fill="none"
                  height="7"
                  viewBox="0 0 10 7"
                  width="10"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M1 1L5 5L9 1"
                    stroke="#28234A"
                    stroke-opacity="0.4"
                    stroke-width="2"
                  />
                </svg>
              </span>
            </div>
          </div>
          <div
            class="MuiCollapse-container-id MuiCollapse-hidden-id"
            style="min-height:0px"
          >
            <div
              class="MuiCollapse-wrapper-id"
            >
              <div
                class="MuiCollapse-wrapperInner-id"
              >
                <div
                  role="region"
                >
                  <div
                    class="FilterContentBody-filterSettings-id"
                  >
                    <div
                      class="FilterOptionField-root-id"
                      data-test-id="filter-field-status"
                    >
                      <div
                        class="FilterOptionField-option-id FilterOptionField-optionRadio-id"
                      >
                        <label
                          class="MuiFormControlLabel-root-id"
                        >
                          <span
                            aria-disabled="false"
                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                            data-test-id="filter-option-val1"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <input
                                checked=""
                                class="PrivateSwitchBase-input-id"
                                name="status"
                                type="radio"
                              />
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <circle
                                  cx="12"
                                  cy="12"
                                  fill="currentColor"
                                  r="12"
                                />
                                <circle
                                  cx="12"
                                  cy="12"
                                  fill="var(--background-paper)"
                                  r="5"
                                />
                              </svg>
                            </span>
                          </span>
                          <span
                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                          >
                            Value 1
                          </span>
                        </label>
                      </div>
                      <div
                        class="FilterOptionField-option-id FilterOptionField-optionRadio-id"
                      >
                        <label
                          class="MuiFormControlLabel-root-id"
                        >
                          <span
                            aria-disabled="false"
                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                            data-test-id="filter-option-val2"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <input
                                class="PrivateSwitchBase-input-id"
                                name="status"
                                type="radio"
                              />
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <circle
                                  cx="12"
                                  cy="12"
                                  fill="var(--background-paper)"
                                  r="11"
                                  stroke="currentColor"
                                  stroke-width="2"
                                />
                              </svg>
                            </span>
                          </span>
                          <span
                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                          >
                            Value 2
                          </span>
                        </label>
                      </div>
                      <div
                        class="FilterOptionField-option-id FilterOptionField-optionRadio-id"
                      >
                        <label
                          class="MuiFormControlLabel-root-id"
                        >
                          <span
                            aria-disabled="false"
                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                            data-test-id="filter-option-val3"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <input
                                class="PrivateSwitchBase-input-id"
                                name="status"
                                type="radio"
                              />
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <circle
                                  cx="12"
                                  cy="12"
                                  fill="var(--background-paper)"
                                  r="11"
                                  stroke="currentColor"
                                  stroke-width="2"
                                />
                              </svg>
                            </span>
                          </span>
                          <span
                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                          >
                            Value 3
                          </span>
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Global messages default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <button
        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
        style="display:block;margin:auto"
        tabindex="0"
        type="button"
      >
        <span
          class="MuiButton-label-id"
        >
          Push message
        </span>
      </button>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Global messages with action 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <button
        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
        style="display:block;margin:auto"
        tabindex="0"
        type="button"
      >
        <span
          class="MuiButton-label-id"
        >
          Push message
        </span>
      </button>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Global messages with error status 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <button
        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
        style="display:block;margin:auto"
        tabindex="0"
        type="button"
      >
        <span
          class="MuiButton-label-id"
        >
          Push message
        </span>
      </button>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Global messages with success status 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <button
        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
        style="display:block;margin:auto"
        tabindex="0"
        type="button"
      >
        <span
          class="MuiButton-label-id"
        >
          Push message
        </span>
      </button>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Global messages with warning status 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <button
        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
        style="display:block;margin:auto"
        tabindex="0"
        type="button"
      >
        <span
          class="MuiButton-label-id"
        >
          Push message
        </span>
      </button>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Horizontal Spacer default 1`] = `
<div
  style="padding:24px"
>
  <div
    style="display:flex;flex-direction:row"
  >
    <div
      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
    />
    <div
      class="MuiTypography-root-id MuiTypography-body1-id"
    >
      &lt;- The spacer is here
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Horizontal Spacer with bigger spacing provided 1`] = `
<div
  style="padding:24px"
>
  <div
    style="display:flex;flex-direction:row"
  >
    <div
      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
    />
    <div
      class="MuiTypography-root-id MuiTypography-body1-id"
    >
      &lt;- The spacer is here
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Horizontal Spacer without 1`] = `
<div
  style="padding:24px"
>
  <div
    style="display:flex;flex-direction:row"
  >
    <div
      class="MuiTypography-root-id MuiTypography-body1-id"
    >
      No spacer
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Link with choices default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <span
          class="LinkChoice-root-id"
          tabindex="0"
        >
          <a
            class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
          >
            Åland Islands
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id LinkChoice-arrow-id MuiSvgIcon-colorPrimary-id"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <g
                style="fill-rule:evenodd"
              >
                <path
                  d="M7 10l5 5 5-5z"
                />
              </g>
            </svg>
          </a>
        </span>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Metadata default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    data-test-expanded="true"
    data-test-id="metadata-editor"
    data-test-is-private="false"
  >
    <div
      class="MuiCardHeader-root-id Metadata-header-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Metadata
          <button
            class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
            data-test-id="expand"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id"
              fill="none"
              focusable="false"
              height="24"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="m8 10.5 4 4 4-4"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.5"
              />
              <circle
                cx="12"
                cy="12"
                r="10.25"
                stroke="currentColor"
                stroke-width="1.5"
              />
            </svg>
          </button>
        </span>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id Metadata-content-id"
    >
      <div
        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
      >
        3 strings
      </div>
    </div>
    <table
      class="MuiTable-root-id Metadata-table-id"
    >
      <thead
        class="MuiTableHead-root-id"
      >
        <tr
          class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
        >
          <th
            class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
            scope="col"
          >
            Field
          </th>
          <th
            class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
            scope="col"
          >
            Value
          </th>
          <th
            class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
            scope="col"
          >
            Actions
          </th>
        </tr>
      </thead>
      <tbody
        class="MuiTableBody-root-id"
      >
        <tr
          class="MuiTableRow-root-id MuiTableRow-hover-id"
          data-test-id="field"
        >
          <td
            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                  name="name:0"
                  type="text"
                  value="key"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </td>
          <td
            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
              >
                <textarea
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                  name="value:0"
                  rows="1"
                >
                  value
                </textarea>
                <textarea
                  aria-hidden="true"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                  readonly=""
                  style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                  tabindex="-1"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </td>
          <td
            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
          >
            <button
              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
              data-test-id="delete-field-0"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MacawIcon-root-id"
                fill="none"
                focusable="false"
                height="24"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="1.5"
                />
              </svg>
            </button>
          </td>
        </tr>
        <tr
          class="MuiTableRow-root-id MuiTableRow-hover-id"
          data-test-id="field"
        >
          <td
            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                  name="name:1"
                  type="text"
                  value="key2"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </td>
          <td
            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
              >
                <textarea
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                  name="value:1"
                  rows="1"
                >
                  {
  "jsonValue": "some-value"
}
                </textarea>
                <textarea
                  aria-hidden="true"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                  readonly=""
                  style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                  tabindex="-1"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </td>
          <td
            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
          >
            <button
              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
              data-test-id="delete-field-1"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MacawIcon-root-id"
                fill="none"
                focusable="false"
                height="24"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="1.5"
                />
              </svg>
            </button>
          </td>
        </tr>
        <tr
          class="MuiTableRow-root-id MuiTableRow-hover-id"
          data-test-id="field"
        >
          <td
            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                  name="name:2"
                  type="text"
                  value="key3"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </td>
          <td
            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
              >
                <textarea
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                  name="value:2"
                  rows="1"
                >
                  some-value
                </textarea>
                <textarea
                  aria-hidden="true"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                  readonly=""
                  style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                  tabindex="-1"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </td>
          <td
            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
          >
            <button
              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
              data-test-id="delete-field-2"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MacawIcon-root-id"
                fill="none"
                focusable="false"
                height="24"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="1.5"
                />
              </svg>
            </button>
          </td>
        </tr>
      </tbody>
    </table>
    <div
      class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
    >
      <button
        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
        data-test-id="add-field"
        tabindex="0"
        type="button"
      >
        <span
          class="MuiButton-label-id"
        >
          Add Field
        </span>
      </button>
    </div>
  </div>
  <div
    class="CardSpacer-spacer-id"
  />
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    data-test-expanded="true"
    data-test-id="metadata-editor"
    data-test-is-private="true"
  >
    <div
      class="MuiCardHeader-root-id Metadata-header-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Private Metadata
          <button
            class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
            data-test-id="expand"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id"
              fill="none"
              focusable="false"
              height="24"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="m8 10.5 4 4 4-4"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.5"
              />
              <circle
                cx="12"
                cy="12"
                r="10.25"
                stroke="currentColor"
                stroke-width="1.5"
              />
            </svg>
          </button>
        </span>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id Metadata-content-id"
    />
    <div
      class="MuiCardContent-root-id Metadata-emptyContainer-id"
    >
      <div
        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
      >
        No metadata created for this element. Use the button below to add new metadata field.
      </div>
    </div>
    <div
      class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
    >
      <button
        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
        data-test-id="add-field"
        tabindex="0"
        type="button"
      >
        <span
          class="MuiButton-label-id"
        >
          Add Field
        </span>
      </button>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Metadata interactive 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    data-test-expanded="true"
    data-test-id="metadata-editor"
    data-test-is-private="false"
  >
    <div
      class="MuiCardHeader-root-id Metadata-header-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Metadata
          <button
            class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
            data-test-id="expand"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id"
              fill="none"
              focusable="false"
              height="24"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="m8 10.5 4 4 4-4"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.5"
              />
              <circle
                cx="12"
                cy="12"
                r="10.25"
                stroke="currentColor"
                stroke-width="1.5"
              />
            </svg>
          </button>
        </span>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id Metadata-content-id"
    >
      <div
        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
      >
        3 strings
      </div>
    </div>
    <table
      class="MuiTable-root-id Metadata-table-id"
    >
      <thead
        class="MuiTableHead-root-id"
      >
        <tr
          class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
        >
          <th
            class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
            scope="col"
          >
            Field
          </th>
          <th
            class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
            scope="col"
          >
            Value
          </th>
          <th
            class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
            scope="col"
          >
            Actions
          </th>
        </tr>
      </thead>
      <tbody
        class="MuiTableBody-root-id"
      >
        <tr
          class="MuiTableRow-root-id MuiTableRow-hover-id"
          data-test-id="field"
        >
          <td
            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                  name="name:0"
                  type="text"
                  value="key"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </td>
          <td
            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
              >
                <textarea
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                  name="value:0"
                  rows="1"
                >
                  value
                </textarea>
                <textarea
                  aria-hidden="true"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                  readonly=""
                  style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                  tabindex="-1"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </td>
          <td
            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
          >
            <button
              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
              data-test-id="delete-field-0"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MacawIcon-root-id"
                fill="none"
                focusable="false"
                height="24"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="1.5"
                />
              </svg>
            </button>
          </td>
        </tr>
        <tr
          class="MuiTableRow-root-id MuiTableRow-hover-id"
          data-test-id="field"
        >
          <td
            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                  name="name:1"
                  type="text"
                  value="key2"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </td>
          <td
            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
              >
                <textarea
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                  name="value:1"
                  rows="1"
                >
                  {
  "jsonValue": "some-value"
}
                </textarea>
                <textarea
                  aria-hidden="true"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                  readonly=""
                  style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                  tabindex="-1"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </td>
          <td
            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
          >
            <button
              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
              data-test-id="delete-field-1"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MacawIcon-root-id"
                fill="none"
                focusable="false"
                height="24"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="1.5"
                />
              </svg>
            </button>
          </td>
        </tr>
        <tr
          class="MuiTableRow-root-id MuiTableRow-hover-id"
          data-test-id="field"
        >
          <td
            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                  name="name:2"
                  type="text"
                  value="key3"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </td>
          <td
            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
              >
                <textarea
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                  name="value:2"
                  rows="1"
                >
                  some-value
                </textarea>
                <textarea
                  aria-hidden="true"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                  readonly=""
                  style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                  tabindex="-1"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </td>
          <td
            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
          >
            <button
              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
              data-test-id="delete-field-2"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MacawIcon-root-id"
                fill="none"
                focusable="false"
                height="24"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="1.5"
                />
              </svg>
            </button>
          </td>
        </tr>
      </tbody>
    </table>
    <div
      class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
    >
      <button
        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
        data-test-id="add-field"
        tabindex="0"
        type="button"
      >
        <span
          class="MuiButton-label-id"
        >
          Add Field
        </span>
      </button>
    </div>
  </div>
  <div
    class="CardSpacer-spacer-id"
  />
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    data-test-expanded="true"
    data-test-id="metadata-editor"
    data-test-is-private="true"
  >
    <div
      class="MuiCardHeader-root-id Metadata-header-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Private Metadata
          <button
            class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
            data-test-id="expand"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id"
              fill="none"
              focusable="false"
              height="24"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="m8 10.5 4 4 4-4"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.5"
              />
              <circle
                cx="12"
                cy="12"
                r="10.25"
                stroke="currentColor"
                stroke-width="1.5"
              />
            </svg>
          </button>
        </span>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id Metadata-content-id"
    />
    <div
      class="MuiCardContent-root-id Metadata-emptyContainer-id"
    >
      <div
        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
      >
        No metadata created for this element. Use the button below to add new metadata field.
      </div>
    </div>
    <div
      class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
    >
      <button
        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
        data-test-id="add-field"
        tabindex="0"
        type="button"
      >
        <span
          class="MuiButton-label-id"
        >
          Add Field
        </span>
      </button>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Metadata loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    data-test-expanded="true"
    data-test-id="metadata-editor"
    data-test-is-private="false"
  >
    <div
      class="MuiCardHeader-root-id Metadata-header-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Metadata
          <button
            class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
            data-test-id="expand"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id"
              fill="none"
              focusable="false"
              height="24"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="m8 10.5 4 4 4-4"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.5"
              />
              <circle
                cx="12"
                cy="12"
                r="10.25"
                stroke="currentColor"
                stroke-width="1.5"
              />
            </svg>
          </button>
        </span>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id"
    >
      <span
        class="Skeleton-skeleton-id"
        data-test-id="skeleton"
      >
        ‌
      </span>
    </div>
  </div>
  <div
    class="CardSpacer-spacer-id"
  />
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    data-test-expanded="true"
    data-test-id="metadata-editor"
    data-test-is-private="true"
  >
    <div
      class="MuiCardHeader-root-id Metadata-header-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Private Metadata
          <button
            class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
            data-test-id="expand"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id"
              fill="none"
              focusable="false"
              height="24"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="m8 10.5 4 4 4-4"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.5"
              />
              <circle
                cx="12"
                cy="12"
                r="10.25"
                stroke="currentColor"
                stroke-width="1.5"
              />
            </svg>
          </button>
        </span>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id"
    >
      <span
        class="Skeleton-skeleton-id"
        data-test-id="skeleton"
      >
        ‌
      </span>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Money formatting default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <span
        class="Money-currency-id"
      >
        EUR
      </span>
      14.00
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Money range from 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      from $5.20
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Money range range 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      $5.20 - $10.60
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Money range to 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      to $10.60
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / MultiSelectField interactive 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          class="MuiFormControl-root-id MultiSelectField-formControl-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
            data-shrink="true"
          >
            Lorem
          </label>
          <div
            class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <div
              aria-haspopup="listbox"
              aria-labelledby="mui-component-select-data"
              class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
              id="mui-component-select-data"
              role="button"
              tabindex="0"
            >
              Apparel
            </div>
            <input
              aria-hidden="true"
              class="MuiSelect-nativeInput-id"
              name="data"
              tabindex="-1"
              value="1"
            />
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconFilled-id"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                d="M7 10l5 5 5-5z"
              />
            </svg>
          </div>
          <p
            class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
          >
            Ipsum
          </p>
        </div>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / MultiSelectField with error hint 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id MultiSelectField-formControl-id"
      >
        <div
          class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-error-id MuiFilledInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
        >
          <div
            aria-haspopup="listbox"
            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
            role="button"
            tabindex="0"
          >
            <span>
              ​
            </span>
          </div>
          <input
            aria-hidden="true"
            class="MuiSelect-nativeInput-id"
            tabindex="-1"
            value=""
          />
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconFilled-id"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <path
              d="M7 10l5 5 5-5z"
            />
          </svg>
        </div>
        <p
          class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
        >
          Lorem error
        </p>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / MultiSelectField with hint 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id MultiSelectField-formControl-id"
      >
        <div
          class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
        >
          <div
            aria-haspopup="listbox"
            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
            role="button"
            tabindex="0"
          >
            <span>
              ​
            </span>
          </div>
          <input
            aria-hidden="true"
            class="MuiSelect-nativeInput-id"
            tabindex="-1"
            value=""
          />
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconFilled-id"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <path
              d="M7 10l5 5 5-5z"
            />
          </svg>
        </div>
        <p
          class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
        >
          Lorem ipsum
        </p>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / MultiSelectField with label 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id MultiSelectField-formControl-id"
      >
        <label
          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
          data-shrink="false"
        >
          Lorem ipsum
        </label>
        <div
          class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
        >
          <div
            aria-haspopup="listbox"
            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
            role="button"
            tabindex="0"
          >
            <span>
              ​
            </span>
          </div>
          <input
            aria-hidden="true"
            class="MuiSelect-nativeInput-id"
            tabindex="-1"
            value=""
          />
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconFilled-id"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <path
              d="M7 10l5 5 5-5z"
            />
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / MultiSelectField with label and hint 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id MultiSelectField-formControl-id"
      >
        <label
          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
          data-shrink="false"
        >
          Lorem
        </label>
        <div
          class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
        >
          <div
            aria-haspopup="listbox"
            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
            role="button"
            tabindex="0"
          >
            <span>
              ​
            </span>
          </div>
          <input
            aria-hidden="true"
            class="MuiSelect-nativeInput-id"
            tabindex="-1"
            value=""
          />
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconFilled-id"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <path
              d="M7 10l5 5 5-5z"
            />
          </svg>
        </div>
        <p
          class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
        >
          Ipsum
        </p>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / MultiSelectField with no value 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id MultiSelectField-formControl-id"
      >
        <div
          class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
        >
          <div
            aria-haspopup="listbox"
            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
            role="button"
            tabindex="0"
          >
            <span>
              ​
            </span>
          </div>
          <input
            aria-hidden="true"
            class="MuiSelect-nativeInput-id"
            tabindex="-1"
            value=""
          />
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconFilled-id"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <path
              d="M7 10l5 5 5-5z"
            />
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / MultiSelectField with value 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id MultiSelectField-formControl-id"
      >
        <div
          class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
        >
          <div
            aria-haspopup="listbox"
            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
            role="button"
            tabindex="0"
          >
            Apparel
          </div>
          <input
            aria-hidden="true"
            class="MuiSelect-nativeInput-id"
            tabindex="-1"
            value="1"
          />
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconFilled-id"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <path
              d="M7 10l5 5 5-5z"
            />
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / MultiSelectField with value, label and hint 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id MultiSelectField-formControl-id"
      >
        <label
          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
          data-shrink="true"
        >
          Lorem
        </label>
        <div
          class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
        >
          <div
            aria-haspopup="listbox"
            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
            role="button"
            tabindex="0"
          >
            Apparel
          </div>
          <input
            aria-hidden="true"
            class="MuiSelect-nativeInput-id"
            tabindex="-1"
            value="1"
          />
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconFilled-id"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <path
              d="M7 10l5 5 5-5z"
            />
          </svg>
        </div>
        <p
          class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
        >
          Ipsum
        </p>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Multiple select with autocomplete can load more 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiPaper-root-id MultiAutocompleteSelectFieldContent-root-id MuiPaper-elevation8-id MuiPaper-rounded-id"
      >
        <div
          class="MultiAutocompleteSelectFieldContent-content-id"
          data-test-id="multi-autocomplete-select-content"
        >
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-selected-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-selected-id"
            data-test-id="multi-autocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MultiAutocompleteSelectFieldContent-checkbox-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  checked=""
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <svg
                    fill="none"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <rect
                      fill="currentColor"
                      height="23"
                      rx="1.5"
                      width="23"
                      x="0.5"
                      y="0.5"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                      fill="var(--background-paper)"
                      fill-rule="evenodd"
                    />
                  </svg>
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Afghanistan
            </span>
          </div>
          <hr
            class="Hr-root-id MultiAutocompleteSelectFieldContent-hr-id"
          />
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="multi-autocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <rect
                    fill="transparent"
                    height="22"
                    rx="2"
                    ry="2"
                    stroke="currentColor"
                    stroke-linejoin="round"
                    stroke-width="2"
                    width="22"
                    x="1"
                    y="1"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Afghanistan
            </span>
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="multi-autocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <rect
                    fill="transparent"
                    height="22"
                    rx="2"
                    ry="2"
                    stroke="currentColor"
                    stroke-linejoin="round"
                    stroke-width="2"
                    width="22"
                    x="1"
                    y="1"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Åland Islands
            </span>
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="multi-autocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <rect
                    fill="transparent"
                    height="22"
                    rx="2"
                    ry="2"
                    stroke="currentColor"
                    stroke-linejoin="round"
                    stroke-width="2"
                    width="22"
                    x="1"
                    y="1"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Albania
            </span>
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="multi-autocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <rect
                    fill="transparent"
                    height="22"
                    rx="2"
                    ry="2"
                    stroke="currentColor"
                    stroke-linejoin="round"
                    stroke-width="2"
                    width="22"
                    x="1"
                    y="1"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Algeria
            </span>
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="multi-autocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <rect
                    fill="transparent"
                    height="22"
                    rx="2"
                    ry="2"
                    stroke="currentColor"
                    stroke-linejoin="round"
                    stroke-width="2"
                    width="22"
                    x="1"
                    y="1"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              American Samoa
            </span>
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="multi-autocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <rect
                    fill="transparent"
                    height="22"
                    rx="2"
                    ry="2"
                    stroke="currentColor"
                    stroke-linejoin="round"
                    stroke-width="2"
                    width="22"
                    x="1"
                    y="1"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              AndorrA
            </span>
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="multi-autocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <rect
                    fill="transparent"
                    height="22"
                    rx="2"
                    ry="2"
                    stroke="currentColor"
                    stroke-linejoin="round"
                    stroke-width="2"
                    width="22"
                    x="1"
                    y="1"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Angola
            </span>
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="multi-autocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <rect
                    fill="transparent"
                    height="22"
                    rx="2"
                    ry="2"
                    stroke="currentColor"
                    stroke-linejoin="round"
                    stroke-width="2"
                    width="22"
                    x="1"
                    y="1"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Anguilla
            </span>
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="multi-autocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <rect
                    fill="transparent"
                    height="22"
                    rx="2"
                    ry="2"
                    stroke="currentColor"
                    stroke-linejoin="round"
                    stroke-width="2"
                    width="22"
                    x="1"
                    y="1"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Antarctica
            </span>
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="multi-autocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <rect
                    fill="transparent"
                    height="22"
                    rx="2"
                    ry="2"
                    stroke="currentColor"
                    stroke-linejoin="round"
                    stroke-width="2"
                    width="22"
                    x="1"
                    y="1"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Antigua and Barbuda
            </span>
          </div>
        </div>
        <hr
          class="Hr-root-id MultiAutocompleteSelectFieldContent-hr-id"
        />
        <div
          class="MultiAutocompleteSelectFieldContent-progressContainer-id"
        >
          <div
            class="MuiCircularProgress-root-id MultiAutocompleteSelectFieldContent-progress-id MuiCircularProgress-colorPrimary-id MuiCircularProgress-indeterminate-id"
            role="progressbar"
            style="width:24px;height:24px"
          >
            <svg
              class="MuiCircularProgress-svg-id"
              viewBox="22 22 44 44"
            >
              <circle
                class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
                cx="44"
                cy="44"
                fill="none"
                r="20.2"
                stroke-width="3.6"
              />
            </svg>
          </div>
        </div>
        <div
          class="MultiAutocompleteSelectFieldContent-arrowContainer-id"
        >
          <div
            class="MultiAutocompleteSelectFieldContent-arrowInnerContainer-id MultiAutocompleteSelectFieldContent-hide-id"
          />
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Multiple select with autocomplete default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiPaper-root-id MultiAutocompleteSelectFieldContent-root-id MuiPaper-elevation8-id MuiPaper-rounded-id"
      >
        <div
          class="MultiAutocompleteSelectFieldContent-content-id"
          data-test-id="multi-autocomplete-select-content"
        >
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-selected-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-selected-id"
            data-test-id="multi-autocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MultiAutocompleteSelectFieldContent-checkbox-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  checked=""
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <svg
                    fill="none"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <rect
                      fill="currentColor"
                      height="23"
                      rx="1.5"
                      width="23"
                      x="0.5"
                      y="0.5"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                      fill="var(--background-paper)"
                      fill-rule="evenodd"
                    />
                  </svg>
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Afghanistan
            </span>
          </div>
          <hr
            class="Hr-root-id MultiAutocompleteSelectFieldContent-hr-id"
          />
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="multi-autocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <rect
                    fill="transparent"
                    height="22"
                    rx="2"
                    ry="2"
                    stroke="currentColor"
                    stroke-linejoin="round"
                    stroke-width="2"
                    width="22"
                    x="1"
                    y="1"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Afghanistan
            </span>
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="multi-autocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <rect
                    fill="transparent"
                    height="22"
                    rx="2"
                    ry="2"
                    stroke="currentColor"
                    stroke-linejoin="round"
                    stroke-width="2"
                    width="22"
                    x="1"
                    y="1"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Åland Islands
            </span>
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="multi-autocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <rect
                    fill="transparent"
                    height="22"
                    rx="2"
                    ry="2"
                    stroke="currentColor"
                    stroke-linejoin="round"
                    stroke-width="2"
                    width="22"
                    x="1"
                    y="1"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Albania
            </span>
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="multi-autocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <rect
                    fill="transparent"
                    height="22"
                    rx="2"
                    ry="2"
                    stroke="currentColor"
                    stroke-linejoin="round"
                    stroke-width="2"
                    width="22"
                    x="1"
                    y="1"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Algeria
            </span>
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="multi-autocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <rect
                    fill="transparent"
                    height="22"
                    rx="2"
                    ry="2"
                    stroke="currentColor"
                    stroke-linejoin="round"
                    stroke-width="2"
                    width="22"
                    x="1"
                    y="1"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              American Samoa
            </span>
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="multi-autocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <rect
                    fill="transparent"
                    height="22"
                    rx="2"
                    ry="2"
                    stroke="currentColor"
                    stroke-linejoin="round"
                    stroke-width="2"
                    width="22"
                    x="1"
                    y="1"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              AndorrA
            </span>
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="multi-autocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <rect
                    fill="transparent"
                    height="22"
                    rx="2"
                    ry="2"
                    stroke="currentColor"
                    stroke-linejoin="round"
                    stroke-width="2"
                    width="22"
                    x="1"
                    y="1"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Angola
            </span>
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="multi-autocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <rect
                    fill="transparent"
                    height="22"
                    rx="2"
                    ry="2"
                    stroke="currentColor"
                    stroke-linejoin="round"
                    stroke-width="2"
                    width="22"
                    x="1"
                    y="1"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Anguilla
            </span>
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="multi-autocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <rect
                    fill="transparent"
                    height="22"
                    rx="2"
                    ry="2"
                    stroke="currentColor"
                    stroke-linejoin="round"
                    stroke-width="2"
                    width="22"
                    x="1"
                    y="1"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Antarctica
            </span>
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="multi-autocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <rect
                    fill="transparent"
                    height="22"
                    rx="2"
                    ry="2"
                    stroke="currentColor"
                    stroke-linejoin="round"
                    stroke-width="2"
                    width="22"
                    x="1"
                    y="1"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Antigua and Barbuda
            </span>
          </div>
        </div>
        <div
          class="MultiAutocompleteSelectFieldContent-arrowContainer-id"
        >
          <div
            class="MultiAutocompleteSelectFieldContent-arrowInnerContainer-id MultiAutocompleteSelectFieldContent-hide-id"
          />
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Multiple select with autocomplete interactive 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        aria-expanded="false"
        aria-haspopup="listbox"
        aria-labelledby="downshift-25-label"
        class="MultiAutocompleteSelectField-container-id"
        role="combobox"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
            data-shrink="false"
          >
            Country
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
          >
            <input
              aria-autocomplete="list"
              aria-invalid="false"
              aria-labelledby="downshift-25-label"
              autocomplete="off"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
              id="downshift-25-menu"
              placeholder="Select country"
              role="listbox"
              type="text"
              value=""
            />
            <div
              aria-haspopup="true"
              aria-label="open menu"
              class="MultiAutocompleteSelectField-adornment-id"
              data-toggle="true"
              role="button"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MacawIcon-root-id"
                fill="none"
                focusable="false"
                height="24"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m8 10 4 4 4-4"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="1.5"
                />
              </svg>
            </div>
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id"
              >
                <span>
                  Country
                </span>
              </legend>
            </fieldset>
          </div>
          <p
            class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
          >
            Value: AF
          </p>
        </div>
      </div>
      <div
        class="MultiAutocompleteSelectField-chipContainer-id"
      >
        <div
          class="MultiAutocompleteSelectField-chip-id"
        >
          <div
            class="MultiAutocompleteSelectField-chipInner-id"
          >
            <div
              class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
            >
              Afghanistan
            </div>
            <button
              class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
              data-test-id="remove"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Multiple select with autocomplete interactive with custom option 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        aria-expanded="false"
        aria-haspopup="listbox"
        aria-labelledby="downshift-26-label"
        class="MultiAutocompleteSelectField-container-id"
        role="combobox"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
            data-shrink="false"
          >
            Country
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
          >
            <input
              aria-autocomplete="list"
              aria-invalid="false"
              aria-labelledby="downshift-26-label"
              autocomplete="off"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
              id="downshift-26-menu"
              placeholder="Select country"
              role="listbox"
              type="text"
              value=""
            />
            <div
              aria-haspopup="true"
              aria-label="open menu"
              class="MultiAutocompleteSelectField-adornment-id"
              data-toggle="true"
              role="button"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MacawIcon-root-id"
                fill="none"
                focusable="false"
                height="24"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m8 10 4 4 4-4"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="1.5"
                />
              </svg>
            </div>
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id"
              >
                <span>
                  Country
                </span>
              </legend>
            </fieldset>
          </div>
          <p
            class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
          >
            Value: AF
          </p>
        </div>
      </div>
      <div
        class="MultiAutocompleteSelectField-chipContainer-id"
      >
        <div
          class="MultiAutocompleteSelectField-chip-id"
        >
          <div
            class="MultiAutocompleteSelectField-chipInner-id"
          >
            <div
              class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
            >
              Afghanistan
            </div>
            <button
              class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
              data-test-id="remove"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Multiple select with autocomplete interactive with error 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        aria-expanded="false"
        aria-haspopup="listbox"
        aria-labelledby="downshift-28-label"
        class="MultiAutocompleteSelectField-container-id"
        role="combobox"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
            data-shrink="false"
          >
            Country
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
          >
            <input
              aria-autocomplete="list"
              aria-invalid="true"
              aria-labelledby="downshift-28-label"
              autocomplete="off"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
              id="downshift-28-menu"
              placeholder="Select country"
              role="listbox"
              type="text"
              value=""
            />
            <div
              aria-haspopup="true"
              aria-label="open menu"
              class="MultiAutocompleteSelectField-adornment-id"
              data-toggle="true"
              role="button"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MacawIcon-root-id"
                fill="none"
                focusable="false"
                height="24"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m8 10 4 4 4-4"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="1.5"
                />
              </svg>
            </div>
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id"
              >
                <span>
                  Country
                </span>
              </legend>
            </fieldset>
          </div>
          <p
            class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
          >
            Value: AF
          </p>
        </div>
      </div>
      <div
        class="MultiAutocompleteSelectField-chipContainer-id"
      >
        <div
          class="MultiAutocompleteSelectField-chip-id"
        >
          <div
            class="MultiAutocompleteSelectField-chipInner-id"
          >
            <div
              class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
            >
              Afghanistan
            </div>
            <button
              class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
              data-test-id="remove"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Multiple select with autocomplete interactive with load more 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        aria-expanded="false"
        aria-haspopup="listbox"
        aria-labelledby="downshift-27-label"
        class="MultiAutocompleteSelectField-container-id"
        role="combobox"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
            data-shrink="false"
          >
            Country
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
          >
            <input
              aria-autocomplete="list"
              aria-invalid="false"
              aria-labelledby="downshift-27-label"
              autocomplete="off"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
              id="downshift-27-menu"
              placeholder="Select country"
              role="listbox"
              type="text"
              value=""
            />
            <div
              aria-haspopup="true"
              aria-label="open menu"
              class="MultiAutocompleteSelectField-adornment-id"
              data-toggle="true"
              role="button"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MacawIcon-root-id"
                fill="none"
                focusable="false"
                height="24"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m8 10 4 4 4-4"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="1.5"
                />
              </svg>
            </div>
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id"
              >
                <span>
                  Country
                </span>
              </legend>
            </fieldset>
          </div>
          <p
            class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
          >
            Value: AF
          </p>
        </div>
      </div>
      <div
        class="MultiAutocompleteSelectField-chipContainer-id"
      >
        <div
          class="MultiAutocompleteSelectField-chip-id"
        >
          <div
            class="MultiAutocompleteSelectField-chipInner-id"
          >
            <div
              class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
            >
              Afghanistan
            </div>
            <button
              class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
              data-test-id="remove"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Multiple select with autocomplete no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiPaper-root-id MultiAutocompleteSelectFieldContent-root-id MuiPaper-elevation8-id MuiPaper-rounded-id"
      >
        <div
          class="MultiAutocompleteSelectFieldContent-content-id"
          data-test-id="multi-autocomplete-select-content"
        >
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-selected-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-selected-id"
            data-test-id="multi-autocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MultiAutocompleteSelectFieldContent-checkbox-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  checked=""
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <svg
                    fill="none"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <rect
                      fill="currentColor"
                      height="23"
                      rx="1.5"
                      width="23"
                      x="0.5"
                      y="0.5"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                      fill="var(--background-paper)"
                      fill-rule="evenodd"
                    />
                  </svg>
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Afghanistan
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / NavigatorButton mac 1`] = `
<div
  class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation1-id MuiPaper-rounded-id"
  style="margin:auto;overflow:visible;position:relative;width:400px"
>
  <div
    class="MuiCardContent-root-id"
  >
    <div
      style="padding:24px"
    >
      <button
        class="MuiButtonBase-root-id LayoutButton-root-id NavigatorButton-root-id"
        data-test-id="navigator"
        tabindex="0"
        type="button"
      >
        <svg
          aria-hidden="true"
          class="MuiSvgIcon-root-id MacawIcon-root-id"
          fill="none"
          focusable="false"
          height="24"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M6.469 13.238 12.831 2.9c.28-.455.982-.213.923.317l-.692 6.228a.5.5 0 0 0 .497.555h3.58a.5.5 0 0 1 .434.748l-6.408 11.213c-.267.468-.985.239-.931-.298l.711-7.113a.5.5 0 0 0-.498-.55H6.896a.5.5 0 0 1-.426-.762Z"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="1.5"
          />
        </svg>
      </button>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / NavigatorButton other 1`] = `
<div
  class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation1-id MuiPaper-rounded-id"
  style="margin:auto;overflow:visible;position:relative;width:400px"
>
  <div
    class="MuiCardContent-root-id"
  >
    <div
      style="padding:24px"
    >
      <button
        class="MuiButtonBase-root-id LayoutButton-root-id NavigatorButton-root-id"
        data-test-id="navigator"
        tabindex="0"
        type="button"
      >
        <svg
          aria-hidden="true"
          class="MuiSvgIcon-root-id MacawIcon-root-id"
          fill="none"
          focusable="false"
          height="24"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M6.469 13.238 12.831 2.9c.28-.455.982-.213.923.317l-.692 6.228a.5.5 0 0 0 .497.555h3.58a.5.5 0 0 1 .434.748l-6.408 11.213c-.267.468-.985.239-.931-.298l.711-7.113a.5.5 0 0 0-.498-.55H6.896a.5.5 0 0 1-.426-.762Z"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="1.5"
          />
        </svg>
      </button>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / PageHeader with title 1`] = `
<div
  style="padding:24px"
>
  <div
    class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    data-test-id="page-header"
  >
    <div
      class="ExtendedPageHeader-titleRow-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
      >
        Lorem ipsum
      </div>
    </div>
    <div
      class="ExtendedPageHeader-action-id"
    >
      <div
        class="PageHeader-root-id"
      />
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / PageHeader with title icon bar 1`] = `
<div
  style="padding:24px"
>
  <div
    class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    data-test-id="page-header"
  >
    <div
      class="ExtendedPageHeader-titleRow-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
      >
        Lorem ipsum
      </div>
    </div>
    <div
      class="ExtendedPageHeader-action-id"
    >
      <div
        class="PageHeader-root-id"
      >
        <button
          class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiIconButton-label-id"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id"
              fill="none"
              focusable="false"
              height="24"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.5"
              />
            </svg>
          </span>
        </button>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / PageHeader without title 1`] = `
<div
  style="padding:24px"
>
  <div
    class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    data-test-id="page-header"
  >
    <div
      class="ExtendedPageHeader-titleRow-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
      >
        <span
          class="Skeleton-skeleton-id"
          data-test-id="skeleton"
          style="width:10em"
        >
          ‌
        </span>
      </div>
    </div>
    <div
      class="ExtendedPageHeader-action-id"
    >
      <div
        class="PageHeader-root-id"
      />
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Percent formatting default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      96.14%
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / PhoneField default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="PhoneField-root-id"
      >
        <div
          class="MuiFormControl-root-id SingleSelectField-formControl-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
            data-shrink="true"
          />
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <div
              aria-haspopup="listbox"
              aria-labelledby="mui-component-select-phone_prefix"
              class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id SingleSelectField-noLabel-id"
              id="mui-component-select-phone_prefix"
              role="button"
              tabindex="0"
            >
              +41
            </div>
            <input
              aria-hidden="true"
              class="MuiSelect-nativeInput-id"
              name="phone_prefix"
              tabindex="-1"
              value="41"
            />
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                d="M7 10l5 5 5-5z"
              />
            </svg>
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:143px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
            data-shrink="true"
          >
             
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              name="phone_number"
              type="text"
              value="123 987 456"
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
              >
                <span>
                   
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Price input disabled 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
      >
        <div
          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
        >
          <input
            aria-invalid="false"
            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
            disabled=""
            min="0"
            name="price"
            step="0.01"
            type="number"
          />
          <span />
          <fieldset
            aria-hidden="true"
            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            style="padding-left:8px"
          >
            <legend
              class="PrivateNotchedOutline-legend-id"
              style="width:0.01px"
            >
              <span>
                ​
              </span>
            </legend>
          </fieldset>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Price input with currency symbol 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
      >
        <div
          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
        >
          <input
            aria-invalid="false"
            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
            min="0"
            name="price"
            step="0.01"
            type="number"
          />
          <div
            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              USD
            </div>
          </div>
          <fieldset
            aria-hidden="true"
            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            style="padding-left:8px"
          >
            <legend
              class="PrivateNotchedOutline-legend-id"
              style="width:0.01px"
            >
              <span>
                ​
              </span>
            </legend>
          </fieldset>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Price input with hint 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
      >
        <div
          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
        >
          <input
            aria-invalid="false"
            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
            min="0"
            name="price"
            step="0.01"
            type="number"
          />
          <span />
          <fieldset
            aria-hidden="true"
            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            style="padding-left:8px"
          >
            <legend
              class="PrivateNotchedOutline-legend-id"
              style="width:0.01px"
            >
              <span>
                ​
              </span>
            </legend>
          </fieldset>
        </div>
        <p
          class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
        >
          Lorem ipsum
        </p>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Price input with label 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
      >
        <label
          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
          data-shrink="false"
        >
          Lorem ipsum
        </label>
        <div
          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
        >
          <input
            aria-invalid="false"
            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
            min="0"
            name="price"
            step="0.01"
            type="number"
          />
          <span />
          <fieldset
            aria-hidden="true"
            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
          >
            <legend
              class="PrivateNotchedOutline-legendLabelled-id"
            >
              <span>
                Lorem ipsum
              </span>
            </legend>
          </fieldset>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Price input with label and hint 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
      >
        <label
          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
          data-shrink="false"
        >
          Lorem
        </label>
        <div
          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
        >
          <input
            aria-invalid="false"
            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
            min="0"
            name="price"
            step="0.01"
            type="number"
          />
          <span />
          <fieldset
            aria-hidden="true"
            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
          >
            <legend
              class="PrivateNotchedOutline-legendLabelled-id"
            >
              <span>
                Lorem
              </span>
            </legend>
          </fieldset>
        </div>
        <p
          class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
        >
          Ipsum
        </p>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Price input with no value 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
      >
        <div
          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
        >
          <input
            aria-invalid="false"
            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
            min="0"
            name="price"
            step="0.01"
            type="number"
          />
          <span />
          <fieldset
            aria-hidden="true"
            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            style="padding-left:8px"
          >
            <legend
              class="PrivateNotchedOutline-legend-id"
              style="width:0.01px"
            >
              <span>
                ​
              </span>
            </legend>
          </fieldset>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Price input with value 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
      >
        <div
          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
        >
          <input
            aria-invalid="false"
            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
            min="0"
            name="price"
            step="0.01"
            type="number"
            value="30"
          />
          <span />
          <fieldset
            aria-hidden="true"
            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            style="padding-left:8px"
          >
            <legend
              class="PrivateNotchedOutline-legend-id"
              style="width:0.01px"
            >
              <span>
                ​
              </span>
            </legend>
          </fieldset>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Price input with value, label, currency symbol and error 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
      >
        <label
          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
          data-shrink="true"
        >
          Lorem
        </label>
        <div
          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
        >
          <input
            aria-invalid="true"
            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
            min="0"
            name="price"
            step="0.01"
            type="number"
            value="30"
          />
          <div
            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              USD
            </div>
          </div>
          <fieldset
            aria-hidden="true"
            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
          >
            <legend
              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
            >
              <span>
                Lorem
              </span>
            </legend>
          </fieldset>
        </div>
        <p
          class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
        >
          Ipsum
        </p>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Price input with value, label, currency symbol and hint 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
      >
        <label
          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
          data-shrink="true"
        >
          Lorem
        </label>
        <div
          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
        >
          <input
            aria-invalid="false"
            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
            min="0"
            name="price"
            step="0.01"
            type="number"
            value="30"
          />
          <div
            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              USD
            </div>
          </div>
          <fieldset
            aria-hidden="true"
            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
          >
            <legend
              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
            >
              <span>
                Lorem
              </span>
            </legend>
          </fieldset>
        </div>
        <p
          class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
        >
          Ipsum
        </p>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Rich text editor default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
        data-test-id="rich-text-editor-content"
      >
        <label
          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
          data-shrink="true"
        >
          Content
        </label>
        <p
          class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
        >
          Lorem ipsum dolor sit amet, consectetur adipiscing elit
        </p>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Rich text editor disabled 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
        data-test-id="rich-text-editor-content"
      >
        <label
          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
          data-shrink="true"
        >
          Content
        </label>
        <p
          class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
        >
          Lorem ipsum dolor sit amet, consectetur adipiscing elit
        </p>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Rich text editor error 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
        data-test-id="rich-text-editor-content"
      >
        <label
          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
          data-shrink="true"
        >
          Content
        </label>
        <p
          class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
        >
          Lorem ipsum dolor sit amet, consectetur adipiscing elit
        </p>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Rich text editor static 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div />
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Save filter tab default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiPaper-root-id SingleAutocompleteSelectFieldContent-root-id MuiPaper-elevation8-id MuiPaper-rounded-id"
      >
        <div
          class="SingleAutocompleteSelectFieldContent-content-id"
          data-test-id="autocomplete-dropdown"
        >
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-selected-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-selected-id"
            data-test-id="single-autocomplete-select-option"
            data-test-type="option"
            data-test-value="AF"
            role="menuitem"
            tabindex="-1"
          >
            Afghanistan
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="single-autocomplete-select-option"
            data-test-type="option"
            data-test-value="AX"
            role="menuitem"
            tabindex="-1"
          >
            Åland Islands
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="single-autocomplete-select-option"
            data-test-type="option"
            data-test-value="AL"
            role="menuitem"
            tabindex="-1"
          >
            Albania
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="single-autocomplete-select-option"
            data-test-type="option"
            data-test-value="DZ"
            role="menuitem"
            tabindex="-1"
          >
            Algeria
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="single-autocomplete-select-option"
            data-test-type="option"
            data-test-value="AS"
            role="menuitem"
            tabindex="-1"
          >
            American Samoa
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="single-autocomplete-select-option"
            data-test-type="option"
            data-test-value="AD"
            role="menuitem"
            tabindex="-1"
          >
            AndorrA
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="single-autocomplete-select-option"
            data-test-type="option"
            data-test-value="AO"
            role="menuitem"
            tabindex="-1"
          >
            Angola
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="single-autocomplete-select-option"
            data-test-type="option"
            data-test-value="AI"
            role="menuitem"
            tabindex="-1"
          >
            Anguilla
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="single-autocomplete-select-option"
            data-test-type="option"
            data-test-value="AQ"
            role="menuitem"
            tabindex="-1"
          >
            Antarctica
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="single-autocomplete-select-option"
            data-test-type="option"
            data-test-value="AG"
            role="menuitem"
            tabindex="-1"
          >
            Antigua and Barbuda
          </div>
          <hr
            class="Hr-root-id SingleAutocompleteSelectFieldContent-hr-id"
          />
          <div
            class="SingleAutocompleteSelectFieldContent-progressContainer-id"
          >
            <div
              class="MuiCircularProgress-root-id SingleAutocompleteSelectFieldContent-progress-id MuiCircularProgress-colorPrimary-id MuiCircularProgress-indeterminate-id"
              role="progressbar"
              style="width:24px;height:24px"
            >
              <svg
                class="MuiCircularProgress-svg-id"
                viewBox="22 22 44 44"
              >
                <circle
                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
                  cx="44"
                  cy="44"
                  fill="none"
                  r="20.2"
                  stroke-width="3.6"
                />
              </svg>
            </div>
          </div>
        </div>
        <div
          class="SingleAutocompleteSelectFieldContent-arrowContainer-id"
        >
          <div
            class="SingleAutocompleteSelectFieldContent-arrowInnerContainer-id SingleAutocompleteSelectFieldContent-hide-id"
          />
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Select with autocomplete default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiPaper-root-id SingleAutocompleteSelectFieldContent-root-id MuiPaper-elevation8-id MuiPaper-rounded-id"
      >
        <div
          class="SingleAutocompleteSelectFieldContent-content-id"
          data-test-id="autocomplete-dropdown"
        >
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-selected-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-selected-id"
            data-test-id="single-autocomplete-select-option"
            data-test-type="option"
            data-test-value="AF"
            role="menuitem"
            tabindex="-1"
          >
            Afghanistan
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="single-autocomplete-select-option"
            data-test-type="option"
            data-test-value="AX"
            role="menuitem"
            tabindex="-1"
          >
            Åland Islands
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="single-autocomplete-select-option"
            data-test-type="option"
            data-test-value="AL"
            role="menuitem"
            tabindex="-1"
          >
            Albania
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="single-autocomplete-select-option"
            data-test-type="option"
            data-test-value="DZ"
            role="menuitem"
            tabindex="-1"
          >
            Algeria
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="single-autocomplete-select-option"
            data-test-type="option"
            data-test-value="AS"
            role="menuitem"
            tabindex="-1"
          >
            American Samoa
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="single-autocomplete-select-option"
            data-test-type="option"
            data-test-value="AD"
            role="menuitem"
            tabindex="-1"
          >
            AndorrA
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="single-autocomplete-select-option"
            data-test-type="option"
            data-test-value="AO"
            role="menuitem"
            tabindex="-1"
          >
            Angola
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="single-autocomplete-select-option"
            data-test-type="option"
            data-test-value="AI"
            role="menuitem"
            tabindex="-1"
          >
            Anguilla
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="single-autocomplete-select-option"
            data-test-type="option"
            data-test-value="AQ"
            role="menuitem"
            tabindex="-1"
          >
            Antarctica
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="single-autocomplete-select-option"
            data-test-type="option"
            data-test-value="AG"
            role="menuitem"
            tabindex="-1"
          >
            Antigua and Barbuda
          </div>
        </div>
        <div
          class="SingleAutocompleteSelectFieldContent-arrowContainer-id"
        >
          <div
            class="SingleAutocompleteSelectFieldContent-arrowInnerContainer-id SingleAutocompleteSelectFieldContent-hide-id"
          />
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Select with autocomplete disabled 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          aria-expanded="false"
          aria-haspopup="listbox"
          aria-labelledby="downshift-35-label"
          class="SingleAutocompleteSelectField-container-id"
          role="combobox"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
              data-shrink="false"
            >
              Country
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-autocomplete="list"
                aria-invalid="false"
                aria-labelledby="downshift-35-label"
                autocomplete="off"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                disabled=""
                id="downshift-35-input"
                placeholder="Select country"
                type="text"
                value="Afghanistan"
              />
              <div
                aria-haspopup="true"
                aria-label="open menu"
                class="SingleAutocompleteSelectField-adornment-id"
                data-toggle="true"
                role="button"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="24"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m8 10 4 4 4-4"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="1.5"
                  />
                </svg>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id"
                >
                  <span>
                    Country
                  </span>
                </legend>
              </fieldset>
            </div>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
            >
              Value: AF
            </p>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Select with autocomplete interactive 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          aria-expanded="false"
          aria-haspopup="listbox"
          aria-labelledby="downshift-31-label"
          class="SingleAutocompleteSelectField-container-id"
          role="combobox"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
              data-shrink="false"
            >
              Country
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-autocomplete="list"
                aria-invalid="false"
                aria-labelledby="downshift-31-label"
                autocomplete="off"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                id="downshift-31-input"
                placeholder="Select country"
                type="text"
                value="Afghanistan"
              />
              <div
                aria-haspopup="true"
                aria-label="open menu"
                class="SingleAutocompleteSelectField-adornment-id"
                data-toggle="true"
                role="button"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="24"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m8 10 4 4 4-4"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="1.5"
                  />
                </svg>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id"
                >
                  <span>
                    Country
                  </span>
                </legend>
              </fieldset>
            </div>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
            >
              Value: AF
            </p>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Select with autocomplete interactive with custom option 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          aria-expanded="false"
          aria-haspopup="listbox"
          aria-labelledby="downshift-32-label"
          class="SingleAutocompleteSelectField-container-id"
          role="combobox"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
              data-shrink="false"
            >
              Country
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-autocomplete="list"
                aria-invalid="false"
                aria-labelledby="downshift-32-label"
                autocomplete="off"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                id="downshift-32-input"
                placeholder="Select country"
                type="text"
                value="Afghanistan"
              />
              <div
                aria-haspopup="true"
                aria-label="open menu"
                class="SingleAutocompleteSelectField-adornment-id"
                data-toggle="true"
                role="button"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="24"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m8 10 4 4 4-4"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="1.5"
                  />
                </svg>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id"
                >
                  <span>
                    Country
                  </span>
                </legend>
              </fieldset>
            </div>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
            >
              Value: AF
            </p>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Select with autocomplete interactive with empty option 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          aria-expanded="false"
          aria-haspopup="listbox"
          aria-labelledby="downshift-33-label"
          class="SingleAutocompleteSelectField-container-id"
          role="combobox"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
              data-shrink="false"
            >
              Country
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-autocomplete="list"
                aria-invalid="false"
                aria-labelledby="downshift-33-label"
                autocomplete="off"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                id="downshift-33-input"
                placeholder="Select country"
                type="text"
                value="Afghanistan"
              />
              <div
                aria-haspopup="true"
                aria-label="open menu"
                class="SingleAutocompleteSelectField-adornment-id"
                data-toggle="true"
                role="button"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="24"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m8 10 4 4 4-4"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="1.5"
                  />
                </svg>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id"
                >
                  <span>
                    Country
                  </span>
                </legend>
              </fieldset>
            </div>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
            >
              Value: AF
            </p>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Select with autocomplete interactive with load more 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          aria-expanded="false"
          aria-haspopup="listbox"
          aria-labelledby="downshift-34-label"
          class="SingleAutocompleteSelectField-container-id"
          role="combobox"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
              data-shrink="false"
            >
              Country
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-autocomplete="list"
                aria-invalid="false"
                aria-labelledby="downshift-34-label"
                autocomplete="off"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                id="downshift-34-input"
                placeholder="Select country"
                type="text"
                value="Afghanistan"
              />
              <div
                aria-haspopup="true"
                aria-label="open menu"
                class="SingleAutocompleteSelectField-adornment-id"
                data-toggle="true"
                role="button"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="24"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m8 10 4 4 4-4"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="1.5"
                  />
                </svg>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id"
                >
                  <span>
                    Country
                  </span>
                </legend>
              </fieldset>
            </div>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
            >
              Value: AF
            </p>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Select with autocomplete naked 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          aria-expanded="false"
          aria-haspopup="listbox"
          aria-labelledby="downshift-29-label"
          class="SingleAutocompleteSelectField-container-id"
          role="combobox"
        >
          <div
            aria-label="naked"
            class="MuiInputBase-root-id SingleAutocompleteSelectField-nakedInput-id MuiInputBase-fullWidth-id MuiInputBase-adornedEnd-id"
            helpertext="Value: AF"
            inputprops="[object Object]"
            label="Country"
          >
            <input
              aria-autocomplete="list"
              aria-labelledby="downshift-29-label"
              autocomplete="off"
              autofocus=""
              class="MuiInputBase-input-id MuiInputBase-inputAdornedEnd-id"
              id="downshift-29-input"
              placeholder="Select country"
              type="text"
              value="Afghanistan"
            />
            <div
              aria-haspopup="true"
              aria-label="open menu"
              class="SingleAutocompleteSelectField-adornment-id"
              data-toggle="true"
              role="button"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MacawIcon-root-id"
                fill="none"
                focusable="false"
                height="24"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m8 10 4 4 4-4"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="1.5"
                />
              </svg>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Select with autocomplete naked and disabled 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          aria-expanded="false"
          aria-haspopup="listbox"
          aria-labelledby="downshift-30-label"
          class="SingleAutocompleteSelectField-container-id"
          role="combobox"
        >
          <div
            aria-label="naked"
            class="MuiInputBase-root-id SingleAutocompleteSelectField-nakedInput-id MuiInputBase-disabled-id MuiInputBase-fullWidth-id MuiInputBase-adornedEnd-id"
            helpertext="Value: AF"
            inputprops="[object Object]"
            label="Country"
          >
            <input
              aria-autocomplete="list"
              aria-labelledby="downshift-30-label"
              autocomplete="off"
              autofocus=""
              class="MuiInputBase-input-id MuiInputBase-disabled-id MuiInputBase-inputAdornedEnd-id"
              disabled=""
              id="downshift-30-input"
              placeholder="Select country"
              type="text"
              value="Afghanistan"
            />
            <div
              aria-haspopup="true"
              aria-label="open menu"
              class="SingleAutocompleteSelectField-adornment-id"
              data-toggle="true"
              role="button"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MacawIcon-root-id"
                fill="none"
                focusable="false"
                height="24"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m8 10 4 4 4-4"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="1.5"
                />
              </svg>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Select with autocomplete no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiPaper-root-id SingleAutocompleteSelectFieldContent-root-id MuiPaper-elevation8-id MuiPaper-rounded-id"
      >
        <div
          class="SingleAutocompleteSelectFieldContent-content-id"
          data-test-id="autocomplete-dropdown"
        >
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-disabled-id"
            data-test-id="single-autocomplete-select-no-options"
            disabled=""
            role="menuitem"
          >
            No results found
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiPaper-root-id SingleAutocompleteSelectFieldContent-root-id MuiPaper-elevation8-id MuiPaper-rounded-id"
      >
        <div
          class="SingleAutocompleteSelectFieldContent-content-id"
          data-test-id="autocomplete-dropdown"
        >
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="single-autocomplete-select-option-add"
            data-test-type="add"
            role="menuitem"
            tabindex="-1"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id SingleAutocompleteSelectFieldContent-add-id MuiSvgIcon-colorPrimary-id"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
              />
            </svg>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
            >
              Add New Collection
            </div>
          </div>
          <hr
            class="Hr-root-id SingleAutocompleteSelectFieldContent-hr-id"
          />
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-selected-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-selected-id"
            data-test-id="single-autocomplete-select-option"
            data-test-type="option"
            data-test-value="AF"
            role="menuitem"
            tabindex="-1"
          >
            Afghanistan
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="single-autocomplete-select-option"
            data-test-type="option"
            data-test-value="AX"
            role="menuitem"
            tabindex="-1"
          >
            Åland Islands
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="single-autocomplete-select-option"
            data-test-type="option"
            data-test-value="AL"
            role="menuitem"
            tabindex="-1"
          >
            Albania
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="single-autocomplete-select-option"
            data-test-type="option"
            data-test-value="DZ"
            role="menuitem"
            tabindex="-1"
          >
            Algeria
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="single-autocomplete-select-option"
            data-test-type="option"
            data-test-value="AS"
            role="menuitem"
            tabindex="-1"
          >
            American Samoa
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="single-autocomplete-select-option"
            data-test-type="option"
            data-test-value="AD"
            role="menuitem"
            tabindex="-1"
          >
            AndorrA
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="single-autocomplete-select-option"
            data-test-type="option"
            data-test-value="AO"
            role="menuitem"
            tabindex="-1"
          >
            Angola
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="single-autocomplete-select-option"
            data-test-type="option"
            data-test-value="AI"
            role="menuitem"
            tabindex="-1"
          >
            Anguilla
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="single-autocomplete-select-option"
            data-test-type="option"
            data-test-value="AQ"
            role="menuitem"
            tabindex="-1"
          >
            Antarctica
          </div>
          <div
            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
            data-test-id="single-autocomplete-select-option"
            data-test-type="option"
            data-test-value="AG"
            role="menuitem"
            tabindex="-1"
          >
            Antigua and Barbuda
          </div>
        </div>
        <div
          class="SingleAutocompleteSelectFieldContent-arrowContainer-id"
        >
          <div
            class="SingleAutocompleteSelectFieldContent-arrowInnerContainer-id SingleAutocompleteSelectFieldContent-hide-id"
          />
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / SingleSelectField with disabled options 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id SingleSelectField-formControl-id"
      >
        <label
          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
          data-shrink="false"
        />
        <div
          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
        >
          <div
            aria-haspopup="listbox"
            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id SingleSelectField-noLabel-id"
            role="button"
            tabindex="0"
          >
            <span>
              ​
            </span>
          </div>
          <input
            aria-hidden="true"
            class="MuiSelect-nativeInput-id"
            tabindex="-1"
            value=""
          />
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <path
              d="M7 10l5 5 5-5z"
            />
          </svg>
          <fieldset
            aria-hidden="true"
            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            style="padding-left:8px"
          >
            <legend
              class="PrivateNotchedOutline-legend-id"
              style="width:0.01px"
            >
              <span>
                ​
              </span>
            </legend>
          </fieldset>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / SingleSelectField with error hint 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id SingleSelectField-formControl-id"
      >
        <label
          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id MuiFormLabel-error-id MuiInputLabel-error-id"
          data-shrink="false"
        />
        <div
          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
        >
          <div
            aria-haspopup="listbox"
            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id SingleSelectField-noLabel-id"
            role="button"
            tabindex="0"
          >
            <span>
              ​
            </span>
          </div>
          <input
            aria-hidden="true"
            class="MuiSelect-nativeInput-id"
            tabindex="-1"
            value=""
          />
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <path
              d="M7 10l5 5 5-5z"
            />
          </svg>
          <fieldset
            aria-hidden="true"
            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            style="padding-left:8px"
          >
            <legend
              class="PrivateNotchedOutline-legend-id"
              style="width:0.01px"
            >
              <span>
                ​
              </span>
            </legend>
          </fieldset>
        </div>
        <p
          class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
        >
          Lorem error
        </p>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / SingleSelectField with hint 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id SingleSelectField-formControl-id"
      >
        <label
          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
          data-shrink="false"
        />
        <div
          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
        >
          <div
            aria-haspopup="listbox"
            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id SingleSelectField-noLabel-id"
            role="button"
            tabindex="0"
          >
            <span>
              ​
            </span>
          </div>
          <input
            aria-hidden="true"
            class="MuiSelect-nativeInput-id"
            tabindex="-1"
            value=""
          />
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <path
              d="M7 10l5 5 5-5z"
            />
          </svg>
          <fieldset
            aria-hidden="true"
            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            style="padding-left:8px"
          >
            <legend
              class="PrivateNotchedOutline-legend-id"
              style="width:0.01px"
            >
              <span>
                ​
              </span>
            </legend>
          </fieldset>
        </div>
        <p
          class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
        >
          Lorem ipsum
        </p>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / SingleSelectField with label 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id SingleSelectField-formControl-id"
      >
        <label
          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
          data-shrink="false"
        >
          Lorem ipsum
        </label>
        <div
          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
        >
          <div
            aria-haspopup="listbox"
            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id"
            role="button"
            tabindex="0"
          >
            <span>
              ​
            </span>
          </div>
          <input
            aria-hidden="true"
            class="MuiSelect-nativeInput-id"
            tabindex="-1"
            value=""
          />
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <path
              d="M7 10l5 5 5-5z"
            />
          </svg>
          <fieldset
            aria-hidden="true"
            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            style="padding-left:8px"
          >
            <legend
              class="PrivateNotchedOutline-legend-id"
              style="width:0.01px"
            >
              <span>
                ​
              </span>
            </legend>
          </fieldset>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / SingleSelectField with label and hint 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id SingleSelectField-formControl-id"
      >
        <label
          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
          data-shrink="false"
        >
          Lorem
        </label>
        <div
          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
        >
          <div
            aria-haspopup="listbox"
            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id"
            role="button"
            tabindex="0"
          >
            <span>
              ​
            </span>
          </div>
          <input
            aria-hidden="true"
            class="MuiSelect-nativeInput-id"
            tabindex="-1"
            value=""
          />
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <path
              d="M7 10l5 5 5-5z"
            />
          </svg>
          <fieldset
            aria-hidden="true"
            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            style="padding-left:8px"
          >
            <legend
              class="PrivateNotchedOutline-legend-id"
              style="width:0.01px"
            >
              <span>
                ​
              </span>
            </legend>
          </fieldset>
        </div>
        <p
          class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
        >
          Ipsum
        </p>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / SingleSelectField with many values 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id SingleSelectField-formControl-id"
      >
        <label
          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
          data-shrink="true"
        />
        <div
          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
        >
          <div
            aria-haspopup="listbox"
            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id SingleSelectField-noLabel-id"
            role="button"
            tabindex="0"
          >
            Apparel
          </div>
          <input
            aria-hidden="true"
            class="MuiSelect-nativeInput-id"
            tabindex="-1"
            value="1"
          />
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <path
              d="M7 10l5 5 5-5z"
            />
          </svg>
          <fieldset
            aria-hidden="true"
            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            style="padding-left:8px"
          >
            <legend
              class="PrivateNotchedOutline-legend-id"
              style="width:143px"
            >
              <span>
                ​
              </span>
            </legend>
          </fieldset>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / SingleSelectField with no value 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id SingleSelectField-formControl-id"
      >
        <label
          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
          data-shrink="false"
        />
        <div
          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
        >
          <div
            aria-haspopup="listbox"
            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id SingleSelectField-noLabel-id"
            role="button"
            tabindex="0"
          >
            <span>
              ​
            </span>
          </div>
          <input
            aria-hidden="true"
            class="MuiSelect-nativeInput-id"
            tabindex="-1"
            value=""
          />
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <path
              d="M7 10l5 5 5-5z"
            />
          </svg>
          <fieldset
            aria-hidden="true"
            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            style="padding-left:8px"
          >
            <legend
              class="PrivateNotchedOutline-legend-id"
              style="width:0.01px"
            >
              <span>
                ​
              </span>
            </legend>
          </fieldset>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / SingleSelectField with value 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id SingleSelectField-formControl-id"
      >
        <label
          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
          data-shrink="true"
        />
        <div
          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
        >
          <div
            aria-haspopup="listbox"
            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id SingleSelectField-noLabel-id"
            role="button"
            tabindex="0"
          >
            Apparel
          </div>
          <input
            aria-hidden="true"
            class="MuiSelect-nativeInput-id"
            tabindex="-1"
            value="1"
          />
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <path
              d="M7 10l5 5 5-5z"
            />
          </svg>
          <fieldset
            aria-hidden="true"
            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            style="padding-left:8px"
          >
            <legend
              class="PrivateNotchedOutline-legend-id"
              style="width:143px"
            >
              <span>
                ​
              </span>
            </legend>
          </fieldset>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / SingleSelectField with value, label and hint 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id SingleSelectField-formControl-id"
      >
        <label
          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
          data-shrink="true"
        >
          Lorem
        </label>
        <div
          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
        >
          <div
            aria-haspopup="listbox"
            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id"
            role="button"
            tabindex="0"
          >
            Apparel
          </div>
          <input
            aria-hidden="true"
            class="MuiSelect-nativeInput-id"
            tabindex="-1"
            value="1"
          />
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <path
              d="M7 10l5 5 5-5z"
            />
          </svg>
          <fieldset
            aria-hidden="true"
            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            style="padding-left:8px"
          >
            <legend
              class="PrivateNotchedOutline-legend-id"
              style="width:143px"
            >
              <span>
                ​
              </span>
            </legend>
          </fieldset>
        </div>
        <p
          class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
        >
          Ipsum
        </p>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Skeleton default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <span
        class="Skeleton-skeleton-id"
        data-test-id="skeleton"
      >
        ‌
      </span>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Sortable chip default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="SortableChip-root-id"
      >
        <div
          class="SortableChip-content-id"
        >
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
            data-test-id="button-drag-handle"
            fill="none"
            focusable="false"
            height="24"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              clip-rule="evenodd"
              d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
              fill="currentColor"
              fill-rule="evenodd"
            />
          </svg>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
            data-test-id="chip-label"
          >
            Lorem Ipsum
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Sortable chip with x 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="SortableChip-root-id"
      >
        <div
          class="SortableChip-content-id"
        >
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
            data-test-id="button-drag-handle"
            fill="none"
            focusable="false"
            height="24"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              clip-rule="evenodd"
              d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
              fill="currentColor"
              fill-rule="evenodd"
            />
          </svg>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
            data-test-id="chip-label"
          >
            Lorem Ipsum
          </div>
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
            data-test-id="button-close"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <path
              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
            />
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Sortable chips field default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div>
        <div
          class="SortableChip-root-id SortableChipsField-chip-id"
        >
          <div
            class="SortableChip-content-id"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
              data-test-id="button-drag-handle"
              fill="none"
              focusable="false"
              height="24"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                clip-rule="evenodd"
                d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
              data-test-id="chip-label"
            >
              Item 1
            </div>
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
              data-test-id="button-close"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
              />
            </svg>
          </div>
        </div>
        <div
          class="SortableChip-root-id SortableChipsField-chip-id"
        >
          <div
            class="SortableChip-content-id"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
              data-test-id="button-drag-handle"
              fill="none"
              focusable="false"
              height="24"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                clip-rule="evenodd"
                d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
              data-test-id="chip-label"
            >
              Item 2
            </div>
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
              data-test-id="button-close"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
              />
            </svg>
          </div>
        </div>
        <div
          class="SortableChip-root-id SortableChipsField-chip-id"
        >
          <div
            class="SortableChip-content-id"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
              data-test-id="button-drag-handle"
              fill="none"
              focusable="false"
              height="24"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                clip-rule="evenodd"
                d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
              data-test-id="chip-label"
            >
              Item 3
            </div>
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
              data-test-id="button-close"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
              />
            </svg>
          </div>
        </div>
        <div
          class="SortableChip-root-id SortableChipsField-chip-id"
        >
          <div
            class="SortableChip-content-id"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
              data-test-id="button-drag-handle"
              fill="none"
              focusable="false"
              height="24"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                clip-rule="evenodd"
                d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
              data-test-id="chip-label"
            >
              Item 4
            </div>
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
              data-test-id="button-close"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
              />
            </svg>
          </div>
        </div>
        <div
          class="SortableChip-root-id SortableChipsField-chip-id"
        >
          <div
            class="SortableChip-content-id"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
              data-test-id="button-drag-handle"
              fill="none"
              focusable="false"
              height="24"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                clip-rule="evenodd"
                d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
              data-test-id="chip-label"
            >
              Item 5
            </div>
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
              data-test-id="button-close"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
              />
            </svg>
          </div>
        </div>
        <div
          class="SortableChip-root-id SortableChipsField-chip-id"
        >
          <div
            class="SortableChip-content-id"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
              data-test-id="button-drag-handle"
              fill="none"
              focusable="false"
              height="24"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                clip-rule="evenodd"
                d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
              data-test-id="chip-label"
            >
              Item 6
            </div>
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
              data-test-id="button-close"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
              />
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Sortable chips field loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div>
        <span
          class="Skeleton-skeleton-id"
          data-test-id="skeleton"
        >
          ‌
        </span>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Sortable chips field with error 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div>
        <div
          class="SortableChip-root-id SortableChipsField-chip-id"
        >
          <div
            class="SortableChip-content-id"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
              data-test-id="button-drag-handle"
              fill="none"
              focusable="false"
              height="24"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                clip-rule="evenodd"
                d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
              data-test-id="chip-label"
            >
              Item 1
            </div>
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
              data-test-id="button-close"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
              />
            </svg>
          </div>
        </div>
        <div
          class="SortableChip-root-id SortableChipsField-chip-id"
        >
          <div
            class="SortableChip-content-id"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
              data-test-id="button-drag-handle"
              fill="none"
              focusable="false"
              height="24"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                clip-rule="evenodd"
                d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
              data-test-id="chip-label"
            >
              Item 2
            </div>
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
              data-test-id="button-close"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
              />
            </svg>
          </div>
        </div>
        <div
          class="SortableChip-root-id SortableChipsField-chip-id"
        >
          <div
            class="SortableChip-content-id"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
              data-test-id="button-drag-handle"
              fill="none"
              focusable="false"
              height="24"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                clip-rule="evenodd"
                d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
              data-test-id="chip-label"
            >
              Item 3
            </div>
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
              data-test-id="button-close"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
              />
            </svg>
          </div>
        </div>
        <div
          class="SortableChip-root-id SortableChipsField-chip-id"
        >
          <div
            class="SortableChip-content-id"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
              data-test-id="button-drag-handle"
              fill="none"
              focusable="false"
              height="24"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                clip-rule="evenodd"
                d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
              data-test-id="chip-label"
            >
              Item 4
            </div>
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
              data-test-id="button-close"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
              />
            </svg>
          </div>
        </div>
        <div
          class="SortableChip-root-id SortableChipsField-chip-id"
        >
          <div
            class="SortableChip-content-id"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
              data-test-id="button-drag-handle"
              fill="none"
              focusable="false"
              height="24"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                clip-rule="evenodd"
                d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
              data-test-id="chip-label"
            >
              Item 5
            </div>
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
              data-test-id="button-close"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
              />
            </svg>
          </div>
        </div>
        <div
          class="SortableChip-root-id SortableChipsField-chip-id"
        >
          <div
            class="SortableChip-content-id"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
              data-test-id="button-drag-handle"
              fill="none"
              focusable="false"
              height="24"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                clip-rule="evenodd"
                d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
              data-test-id="chip-label"
            >
              Item 6
            </div>
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
              data-test-id="button-close"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
              />
            </svg>
          </div>
        </div>
        <div
          class="MuiTypography-root-id SortableChipsField-errorText-id MuiTypography-caption-id"
        >
          Something went wrong
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Table header ascending 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;width:400px"
  >
    <div
      class="ResponsiveTable-root-id"
    >
      <table
        class="MuiTable-root-id"
      >
        <thead
          class="MuiTableHead-root-id"
        >
          <tr
            class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
          >
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
              scope="col"
            >
              <div
                class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
              >
                <div
                  class="TableCellHeader-label-id"
                >
                  Name
                </div>
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <rect
                    fill="transparent"
                    height="24"
                    width="24"
                  />
                  <path
                    clip-rule="evenodd"
                    d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                    fill="currentColor"
                    fill-rule="evenodd"
                  />
                </svg>
              </div>
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
              scope="col"
            >
              <div
                class="TableCellHeader-labelContainer-id"
              >
                <div
                  class="TableCellHeader-label-id"
                >
                  Type
                </div>
              </div>
            </th>
          </tr>
        </thead>
        <tbody
          class="MuiTableBody-root-id"
        >
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id"
            >
              Apple Juice
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id"
            >
              Juice
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Table header descending 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;width:400px"
  >
    <div
      class="ResponsiveTable-root-id"
    >
      <table
        class="MuiTable-root-id"
      >
        <thead
          class="MuiTableHead-root-id"
        >
          <tr
            class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
          >
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
              scope="col"
            >
              <div
                class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
              >
                <div
                  class="TableCellHeader-label-id"
                >
                  Name
                </div>
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id TableCellHeader-arrow-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <rect
                    fill="transparent"
                    height="24"
                    width="24"
                  />
                  <path
                    clip-rule="evenodd"
                    d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                    fill="currentColor"
                    fill-rule="evenodd"
                  />
                </svg>
              </div>
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
              scope="col"
            >
              <div
                class="TableCellHeader-labelContainer-id"
              >
                <div
                  class="TableCellHeader-label-id"
                >
                  Type
                </div>
              </div>
            </th>
          </tr>
        </thead>
        <tbody
          class="MuiTableBody-root-id"
        >
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id"
            >
              Apple Juice
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id"
            >
              Juice
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Table header interactive 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;width:400px"
  >
    <div
      class="ResponsiveTable-root-id"
    >
      <table
        class="MuiTable-root-id"
      >
        <thead
          class="MuiTableHead-root-id"
        >
          <tr
            class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
          >
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
              scope="col"
            >
              <div
                class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
              >
                <div
                  class="TableCellHeader-label-id"
                >
                  Name
                </div>
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <rect
                    fill="transparent"
                    height="24"
                    width="24"
                  />
                  <path
                    clip-rule="evenodd"
                    d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                    fill="currentColor"
                    fill-rule="evenodd"
                  />
                </svg>
              </div>
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
              scope="col"
            >
              <div
                class="TableCellHeader-labelContainer-id"
              >
                <div
                  class="TableCellHeader-label-id"
                >
                  Type
                </div>
              </div>
            </th>
          </tr>
        </thead>
        <tbody
          class="MuiTableBody-root-id"
        >
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id"
            >
              Apple Juice
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id"
            >
              Juice
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / TablePagination both previous and next pages are available 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <tbody>
            <tr>
              <td
                class="MuiTableCell-root-id"
                colspan="1"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  />
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id"
                      data-test="button-pagination-back"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id"
                      data-test="button-pagination-next"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / TablePagination next page available 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <tbody>
            <tr>
              <td
                class="MuiTableCell-root-id"
                colspan="1"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  />
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id"
                      data-test="button-pagination-next"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / TablePagination no previous / next page 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <tbody>
            <tr>
              <td
                class="MuiTableCell-root-id"
                colspan="1"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  />
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / TablePagination previous page available 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <tbody>
            <tr>
              <td
                class="MuiTableCell-root-id"
                colspan="1"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  />
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id"
                      data-test="button-pagination-back"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Timeline default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Timeline-root-id"
  >
    <div
      class="TimelineEvent-root-id"
    >
      <span
        class="TimelineEvent-dot-id"
      />
      <div
        class="TimelineEventHeader-container-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Expansion panel 1
        </div>
        <div
          class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
        >
          <time
            class=""
            datetime="1525712282000"
            title="May 7, 2018 12:58 PM"
          >
            3 months ago
          </time>
        </div>
      </div>
    </div>
    <div
      class="TimelineEvent-root-id"
    >
      <span
        class="TimelineEvent-dot-id"
      />
      <div
        class="TimelineEventHeader-container-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Expansion panel 2
        </div>
        <div
          class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
        >
          <time
            class=""
            datetime="1525711682000"
            title="May 7, 2018 12:48 PM"
          >
            3 months ago
          </time>
        </div>
      </div>
    </div>
    <div
      class="TimelineEvent-root-id"
    >
      <span
        class="TimelineEvent-dot-id"
      />
      <div
        class="TimelineEventHeader-container-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Expansion panel 3
        </div>
        <div
          class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
        >
          <time
            class=""
            datetime="1525625882000"
            title="May 6, 2018 12:58 PM"
          >
            3 months ago
          </time>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Timeline with expansion panels 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Timeline-root-id"
  >
    <div
      class="TimelineEvent-root-id"
    >
      <span
        class="TimelineEvent-dot-id"
      />
      <div
        class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          aria-disabled="false"
          aria-expanded="false"
          class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
          role="button"
          tabindex="0"
        >
          <div
            class="MuiAccordionSummary-content-id"
          >
            <div
              class="TimelineEventHeader-container-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Expansion panel 1
              </div>
              <div
                class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
              >
                <time
                  class=""
                  datetime="1525712282000"
                  title="May 7, 2018 12:58 PM"
                >
                  3 months ago
                </time>
              </div>
            </div>
          </div>
          <div
            aria-disabled="false"
            aria-hidden="true"
            class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
          >
            <span
              class="MuiIconButton-label-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <path
                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
                />
              </svg>
            </span>
          </div>
        </div>
        <div
          class="MuiCollapse-container-id MuiCollapse-hidden-id"
          style="min-height:0px"
        >
          <div
            class="MuiCollapse-wrapper-id"
          >
            <div
              class="MuiCollapse-wrapperInner-id"
            >
              <div
                role="region"
              >
                <div
                  class="MuiAccordionDetails-root-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="TimelineEvent-root-id"
    >
      <span
        class="TimelineEvent-dot-id"
      />
      <div
        class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          aria-disabled="false"
          aria-expanded="false"
          class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
          role="button"
          tabindex="0"
        >
          <div
            class="MuiAccordionSummary-content-id"
          >
            <div
              class="TimelineEventHeader-container-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Expansion panel 2
              </div>
              <div
                class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
              >
                <time
                  class=""
                  datetime="1525711682000"
                  title="May 7, 2018 12:48 PM"
                >
                  3 months ago
                </time>
              </div>
            </div>
          </div>
          <div
            aria-disabled="false"
            aria-hidden="true"
            class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
          >
            <span
              class="MuiIconButton-label-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <path
                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
                />
              </svg>
            </span>
          </div>
        </div>
        <div
          class="MuiCollapse-container-id MuiCollapse-hidden-id"
          style="min-height:0px"
        >
          <div
            class="MuiCollapse-wrapper-id"
          >
            <div
              class="MuiCollapse-wrapperInner-id"
            >
              <div
                role="region"
              >
                <div
                  class="MuiAccordionDetails-root-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="TimelineEvent-root-id"
    >
      <span
        class="TimelineEvent-dot-id"
      />
      <div
        class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          aria-disabled="false"
          aria-expanded="false"
          class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
          role="button"
          tabindex="0"
        >
          <div
            class="MuiAccordionSummary-content-id"
          >
            <div
              class="TimelineEventHeader-container-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Expansion panel 3
              </div>
              <div
                class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
              >
                <time
                  class=""
                  datetime="1525625882000"
                  title="May 6, 2018 12:58 PM"
                >
                  3 months ago
                </time>
              </div>
            </div>
          </div>
          <div
            aria-disabled="false"
            aria-hidden="true"
            class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
          >
            <span
              class="MuiIconButton-label-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <path
                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
                />
              </svg>
            </span>
          </div>
        </div>
        <div
          class="MuiCollapse-container-id MuiCollapse-hidden-id"
          style="min-height:0px"
        >
          <div
            class="MuiCollapse-wrapper-id"
          >
            <div
              class="MuiCollapse-wrapperInner-id"
            >
              <div
                role="region"
              >
                <div
                  class="MuiAccordionDetails-root-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Timeline with order notes 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Timeline-root-id"
  >
    <div
      class="TimelineEvent-root-id"
    >
      <span
        class="TimelineEvent-dot-id"
      />
      <div
        class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          aria-disabled="false"
          aria-expanded="false"
          class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
          role="button"
          tabindex="0"
        >
          <div
            class="MuiAccordionSummary-content-id"
          >
            <div
              class="TimelineEventHeader-container-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Expansion panel 1
              </div>
              <div
                class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
              >
                <time
                  class=""
                  datetime="1525712282000"
                  title="May 7, 2018 12:58 PM"
                >
                  3 months ago
                </time>
              </div>
            </div>
          </div>
          <div
            aria-disabled="false"
            aria-hidden="true"
            class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
          >
            <span
              class="MuiIconButton-label-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <path
                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
                />
              </svg>
            </span>
          </div>
        </div>
        <div
          class="MuiCollapse-container-id MuiCollapse-hidden-id"
          style="min-height:0px"
        >
          <div
            class="MuiCollapse-wrapper-id"
          >
            <div
              class="MuiCollapse-wrapperInner-id"
            >
              <div
                role="region"
              >
                <div
                  class="MuiAccordionDetails-root-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="TimelineNote-root-id"
    >
      <div
        class="MuiAvatar-root-id MuiAvatar-circle-id TimelineNote-avatar-id MuiAvatar-colorDefault-id"
        style="background:#f44336"
      >
        <svg
          aria-hidden="true"
          class="MuiSvgIcon-root-id"
          focusable="false"
          viewBox="0 0 24 24"
        >
          <path
            d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
          />
        </svg>
      </div>
      <div
        class="TimelineNote-title-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          admin@example.com
        </div>
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          <time
            class=""
            datetime="1525712282000"
            title="May 7, 2018 12:58 PM"
          >
            3 months ago
          </time>
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardContent-root-id TimelineNote-cardContent-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
          </div>
        </div>
      </div>
    </div>
    <div
      class="TimelineNote-root-id"
    >
      <div
        class="MuiAvatar-root-id MuiAvatar-circle-id TimelineNote-avatar-id MuiAvatar-colorDefault-id"
        style="background:#03a9f4"
      >
        <svg
          aria-hidden="true"
          class="MuiSvgIcon-root-id"
          focusable="false"
          viewBox="0 0 24 24"
        >
          <path
            d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
          />
        </svg>
      </div>
      <div
        class="TimelineNote-title-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          ceo@example.com
        </div>
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          <time
            class=""
            datetime="1525712282000"
            title="May 7, 2018 12:58 PM"
          >
            3 months ago
          </time>
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardContent-root-id TimelineNote-cardContent-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
          </div>
        </div>
      </div>
    </div>
    <div
      class="TimelineEvent-root-id"
    >
      <span
        class="TimelineEvent-dot-id"
      />
      <div
        class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          aria-disabled="false"
          aria-expanded="false"
          class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
          role="button"
          tabindex="0"
        >
          <div
            class="MuiAccordionSummary-content-id"
          >
            <div
              class="TimelineEventHeader-container-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Expansion panel 3
              </div>
              <div
                class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
              >
                <time
                  class=""
                  datetime="1525625882000"
                  title="May 6, 2018 12:58 PM"
                >
                  3 months ago
                </time>
              </div>
            </div>
          </div>
          <div
            aria-disabled="false"
            aria-hidden="true"
            class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
          >
            <span
              class="MuiIconButton-label-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <path
                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
                />
              </svg>
            </span>
          </div>
        </div>
        <div
          class="MuiCollapse-container-id MuiCollapse-hidden-id"
          style="min-height:0px"
        >
          <div
            class="MuiCollapse-wrapper-id"
          >
            <div
              class="MuiCollapse-wrapperInner-id"
            >
              <div
                role="region"
              >
                <div
                  class="MuiAccordionDetails-root-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Unassign attribute default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Generics / Unassign multiple attributes default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Generics / Weight default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      8.4 kg
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Weight range from 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      from 4.2 kg
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Weight range range 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      4.2 kg - 81.9 kg
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Weight range to 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      to 81.9 kg
    </div>
  </div>
</div>
`;

exports[`Storyshots Navigation / Menu create default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Navigation / Menu create form errors 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Navigation / Menu create loading 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Navigation / Menu item default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Navigation / Menu item edit 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Navigation / Menu item errors 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Orders / Changing address in order address change when customer is changed 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Orders / Changing address in order billing address change 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Orders / Changing address in order loading 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Orders / Changing address in order no customer addresses 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Orders / Changing address in order shipping address change 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Orders / Draft order channel section default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Sales channel
            </span>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
          data-test-id="sales-channel"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Default Channel
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Orders / Draft order channel section loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Sales channel
            </span>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
          data-test-id="sales-channel"
        >
          <span
            class="Skeleton-skeleton-id"
            data-test-id="skeleton"
          >
            ‌
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Orders / Order Discount common modal fixed amount with existing discount 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Orders / Order Discount common modal fixed amount with loading confirm 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Orders / Order Discount common modal percentage with existing discount 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Orders / Order Discount common modal percentage without existing discount 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Orders / Order details channel section default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        data-test-id="order-sales-channel"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Sales channel
            </span>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            International store
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Orders / Order details channel section loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        data-test-id="order-sales-channel"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Sales channel
            </span>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
        >
          <span
            class="Skeleton-skeleton-id"
            data-test-id="skeleton"
          >
            ‌
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Orders / Order details fulfillment warehouse selection modal default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Orders / OrderBulkCancelDialog default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Orders / OrderCancelDialog default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Orders / OrderCancelDialog errors 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Orders / OrderCustomer default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Customer
        </span>
      </div>
      <div
        class="MuiCardHeader-action-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
          data-test-id="edit-customer"
          disabled=""
          tabindex="-1"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            Edit
          </span>
        </button>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
      >
        melissa.simon@example.com
      </div>
    </div>
    <hr
      class="Hr-root-id"
    />
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="OrderCustomer-sectionHeader-id"
      >
        <div
          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
        >
          Shipping Address
        </div>
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        Melissa Simon
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        487 Roberto Shores
        <br />
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        66272 West Patriciastad
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        Wyspy Salomona
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      />
      <div
        class="FormSpacer-spacer-id"
      />
      <div
        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
      >
        Fulfill from All Warehouses
      </div>
    </div>
    <hr
      class="Hr-root-id"
    />
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="OrderCustomer-sectionHeader-id"
      >
        <div
          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
        >
          Billing Address
        </div>
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        Same as shipping address
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Orders / OrderCustomer editable 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Customer
        </span>
      </div>
      <div
        class="MuiCardHeader-action-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
          data-test-id="edit-customer"
          disabled=""
          tabindex="-1"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            Edit
          </span>
        </button>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
      >
        melissa.simon@example.com
      </div>
    </div>
    <hr
      class="Hr-root-id"
    />
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="OrderCustomer-sectionHeader-id"
      >
        <div
          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
        >
          Shipping Address
        </div>
        <div
          class="OrderCustomer-sectionHeaderToolbar-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
            data-test-id="edit-shipping-address"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Edit
            </span>
          </button>
        </div>
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        Melissa Simon
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        487 Roberto Shores
        <br />
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        66272 West Patriciastad
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        Wyspy Salomona
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      />
      <div
        class="FormSpacer-spacer-id"
      />
      <div
        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
      >
        Fulfill from All Warehouses
      </div>
    </div>
    <hr
      class="Hr-root-id"
    />
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="OrderCustomer-sectionHeader-id"
      >
        <div
          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
        >
          Billing Address
        </div>
        <div
          class="OrderCustomer-sectionHeaderToolbar-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
            data-test-id="edit-billing-address"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Edit
            </span>
          </button>
        </div>
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        Same as shipping address
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Orders / OrderCustomer loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Customer
        </span>
      </div>
      <div
        class="MuiCardHeader-action-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
          data-test-id="edit-customer"
          disabled=""
          tabindex="-1"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            Edit
          </span>
        </button>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id"
    >
      <span
        class="Skeleton-skeleton-id"
        data-test-id="skeleton"
      >
        ‌
      </span>
    </div>
    <hr
      class="Hr-root-id"
    />
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="OrderCustomer-sectionHeader-id"
      >
        <div
          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
        >
          Shipping Address
        </div>
      </div>
      <span
        class="Skeleton-skeleton-id"
        data-test-id="skeleton"
      >
        ‌
      </span>
    </div>
    <hr
      class="Hr-root-id"
    />
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="OrderCustomer-sectionHeader-id"
      >
        <div
          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
        >
          Billing Address
        </div>
      </div>
      <span
        class="Skeleton-skeleton-id"
        data-test-id="skeleton"
      >
        ‌
      </span>
    </div>
  </div>
</div>
`;

exports[`Storyshots Orders / OrderCustomer no user permissions 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Customer
        </span>
      </div>
      <div
        class="MuiCardHeader-action-id"
      />
    </div>
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
      >
        melissa.simon@example.com
      </div>
    </div>
    <hr
      class="Hr-root-id"
    />
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="OrderCustomer-sectionHeader-id"
      >
        <div
          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
        >
          Shipping Address
        </div>
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        Melissa Simon
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        487 Roberto Shores
        <br />
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        66272 West Patriciastad
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        Wyspy Salomona
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      />
      <div
        class="FormSpacer-spacer-id"
      />
      <div
        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
      >
        Fulfill from All Warehouses
      </div>
    </div>
    <hr
      class="Hr-root-id"
    />
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="OrderCustomer-sectionHeader-id"
      >
        <div
          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
        >
          Billing Address
        </div>
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        Same as shipping address
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Orders / OrderCustomer with different addresses 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Customer
        </span>
      </div>
      <div
        class="MuiCardHeader-action-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
          data-test-id="edit-customer"
          disabled=""
          tabindex="-1"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            Edit
          </span>
        </button>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
      >
        melissa.simon@example.com
      </div>
    </div>
    <hr
      class="Hr-root-id"
    />
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="OrderCustomer-sectionHeader-id"
      >
        <div
          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
        >
          Shipping Address
        </div>
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        Melissa Simon
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        487 Roberto Shores
        <br />
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        66272 West Patriciastad
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        Wyspy Salomona
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      />
      <div
        class="FormSpacer-spacer-id"
      />
      <div
        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
      >
        Fulfill from All Warehouses
      </div>
    </div>
    <hr
      class="Hr-root-id"
    />
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="OrderCustomer-sectionHeader-id"
      >
        <div
          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
        >
          Billing Address
        </div>
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        Melissa Simon
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        487 Roberto Shores
        <br />
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        66272 West Patriciastad
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        Wyspy Salomona
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      />
    </div>
  </div>
</div>
`;

exports[`Storyshots Orders / OrderCustomerChangeDialog default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Orders / OrderDraftCancelDialog default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Orders / OrderDraftCancelDialog errors 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Orders / OrderFulfillmentCancelDialog default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Orders / OrderFulfillmentCancelDialog error 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Orders / OrderFulfillmentTrackingDialog default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Orders / OrderFulfillmentTrackingDialog errors 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Orders / OrderHistory default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="OrderHistory-root-id"
  >
    <div
      class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
    >
      Order History
    </div>
    <hr
      class="Hr-root-id"
    />
    <div
      class="Timeline-root-id"
    >
      <form>
        <div
          class="Timeline-noteRoot-id"
        >
          <div
            class="MuiCardContent-root-id Timeline-noteTitle-id"
          >
            <div
              class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
              style="background:#673ab7"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <path
                  d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
                />
              </svg>
            </div>
            <div
              class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
            >
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              >
                <textarea
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  name="message"
                  placeholder="Leave your note here..."
                  rows="1"
                />
                <textarea
                  aria-hidden="true"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  readonly=""
                  style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                  tabindex="-1"
                />
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Send
                  </span>
                </button>
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
        </div>
      </form>
      <div
        class="TimelineEvent-root-id"
      >
        <span
          class="TimelineEvent-dot-id"
        />
        <div
          class="TimelineEventHeader-container-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Payment was authorized
          </div>
          <div
            class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
          >
            <time
              class=""
              datetime="1568726544376"
              title="Sep 17, 2019 9:22 AM"
            >
              in a year
            </time>
          </div>
        </div>
      </div>
      <div
        class="TimelineEvent-root-id"
      >
        <span
          class="TimelineEvent-dot-id"
        />
        <div
          class="TimelineEventHeader-container-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Order refund information was sent to customer
          </div>
          <div
            class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
          >
            <time
              class=""
              datetime="1568726544376"
              title="Sep 17, 2019 9:22 AM"
            >
              in a year
            </time>
          </div>
        </div>
      </div>
      <div
        class="TimelineEvent-root-id"
      >
        <span
          class="TimelineEvent-dot-id"
        />
        <div
          class="TimelineEventHeader-container-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Order cancel information was sent to customer
          </div>
          <div
            class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
          >
            <time
              class=""
              datetime="1568726544376"
              title="Sep 17, 2019 9:22 AM"
            >
              in a year
            </time>
          </div>
        </div>
      </div>
      <div
        class="TimelineEvent-root-id"
      >
        <span
          class="TimelineEvent-dot-id"
        />
        <div
          class="TimelineEventHeader-container-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Note from external service
          </div>
          <div
            class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
          >
            <time
              class=""
              datetime="1568726544376"
              title="Sep 17, 2019 9:22 AM"
            >
              in a year
            </time>
          </div>
        </div>
      </div>
      <div
        class="TimelineNote-root-id"
      >
        <div
          class="TimelineNote-title-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          />
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            <time
              class=""
              datetime="1568726544376"
              title="Sep 17, 2019 9:22 AM"
            >
              in a year
            </time>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardContent-root-id TimelineNote-cardContent-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              This is note
            </div>
          </div>
        </div>
      </div>
      <div
        class="TimelineNote-root-id"
      >
        <div
          class="TimelineNote-title-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          />
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            <time
              class=""
              datetime="1568726544376"
              title="Sep 17, 2019 9:22 AM"
            >
              in a year
            </time>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardContent-root-id TimelineNote-cardContent-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              This is note
            </div>
          </div>
        </div>
      </div>
      <div
        class="TimelineEvent-root-id"
      >
        <span
          class="TimelineEvent-dot-id"
        />
        <div
          class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            aria-disabled="false"
            aria-expanded="false"
            class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
            role="button"
            tabindex="0"
          >
            <div
              class="MuiAccordionSummary-content-id"
            >
              <div
                class="TimelineEventHeader-container-id"
              >
                <div
                  class="TimelineEventHeader-elementsContainer-id"
                >
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-titleElement-id MuiTypography-body1-id"
                  >
                    Products were refunded by 
                  </div>
                  <a
                    class="MuiTypography-root-id TimelineEventHeader-titleElement-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                  >
                    Jane Doe
                  </a>
                </div>
                <div
                  class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                >
                  <time
                    class=""
                    datetime="1537190544376"
                    title="Sep 17, 2018 9:22 AM"
                  >
                    in a month
                  </time>
                </div>
              </div>
            </div>
            <div
              aria-disabled="false"
              aria-hidden="true"
              class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
                  />
                </svg>
              </span>
            </div>
          </div>
          <div
            class="MuiCollapse-container-id MuiCollapse-hidden-id"
            style="min-height:0px"
          >
            <div
              class="MuiCollapse-wrapper-id"
            >
              <div
                class="MuiCollapse-wrapperInner-id"
              >
                <div
                  role="region"
                >
                  <div
                    class="MuiAccordionDetails-root-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        style="font-size:12px"
                      >
                        Products refunded
                      </div>
                      <table>
                        <tbody>
                          <tr>
                            <td
                              class="OrderHistory-linesTableCell-id"
                            >
                              Milk
                            </td>
                            <td
                              class="OrderHistory-linesTableCell-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:12px"
                              >
                                Cow's milk
                              </div>
                            </td>
                            <td
                              class="OrderHistory-linesTableCell-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:12px"
                              >
                                qty: 4
                              </div>
                            </td>
                          </tr>
                          <tr>
                            <td
                              class="OrderHistory-linesTableCell-id"
                            >
                              Milk
                            </td>
                            <td
                              class="OrderHistory-linesTableCell-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:12px"
                              >
                                Goat's milk
                              </div>
                            </td>
                            <td
                              class="OrderHistory-linesTableCell-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:12px"
                              >
                                qty: 4
                              </div>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Shipment was refunded
                      </div>
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        style="font-size:12px"
                      >
                        Transaction reference
                      </div>
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        123
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="TimelineEvent-root-id"
      >
        <span
          class="TimelineEvent-dot-id"
        />
        <div
          class="TimelineEventHeader-container-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Fulfilled 1 items
          </div>
          <div
            class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
          >
            <time
              class=""
              datetime="1537190544376"
              title="Sep 17, 2018 9:22 AM"
            >
              in a month
            </time>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Orders / OrderInvoiceList loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Invoices
        </span>
      </div>
      <div
        class="MuiCardHeader-action-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            Generate
          </span>
        </button>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id"
    >
      <span
        class="Skeleton-skeleton-id"
        data-test-id="skeleton"
      >
        ‌
      </span>
    </div>
  </div>
</div>
`;

exports[`Storyshots Orders / OrderInvoiceList with invoices 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Invoices
        </span>
      </div>
      <div
        class="MuiCardHeader-action-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            Generate
          </span>
        </button>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id OrderInvoiceList-cardContentTable-id"
    >
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id OrderInvoiceList-invoicesTable-id"
        >
          <tbody
            class="MuiTableBody-root-id OrderInvoiceList-invoicesTableBody-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
              >
                Invoice 1/07/2020
                <div
                  class="MuiTypography-root-id MuiTypography-caption-id"
                >
                  created Jul 2, 2020
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Send
                  </span>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
              >
                Invoice 1/07/2020
                <div
                  class="MuiTypography-root-id MuiTypography-caption-id"
                >
                  created Jul 2, 2020
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Send
                  </span>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
              >
                Invoice 1/07/2020
                <div
                  class="MuiTypography-root-id MuiTypography-caption-id"
                >
                  created Jul 2, 2020
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Send
                  </span>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Orders / OrderInvoiceList without invoices 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Invoices
        </span>
      </div>
      <div
        class="MuiCardHeader-action-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            Generate
          </span>
        </button>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
      >
        No invoices to be shown
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Orders / OrderMarkAsPaidDialog default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Orders / OrderMarkAsPaidDialog errors 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Orders / OrderPaymentDialog capture payment 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Orders / OrderPaymentDialog errors 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Orders / OrderPaymentVoidDialog default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Orders / OrderPaymentVoidDialog errors 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Orders / OrderProductAddDialog default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Orders / OrderProductAddDialog errors 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Orders / OrderShippingMethodEditDialog default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Orders / OrderShippingMethodEditDialog errors 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Products / ProductVariantImageSelectDialog default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Shipping / Add postal code range default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Shipping / Assign countries all countries in shipping zones 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Shipping / Assign countries default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Shipping / DeleteShippingRateDialog default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Shipping / DeleteShippingRateDialog loading 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Shipping / Order value rates default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Order Value
        </span>
      </div>
    </div>
    <div
      class="OrderValue-content-id"
    >
      <div
        class="OrderValue-subheader-id"
      >
        <label
          class="MuiFormControlLabel-root-id"
        >
          <span
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
          >
            <span
              class="MuiIconButton-label-id"
            >
              <input
                checked=""
                class="PrivateSwitchBase-input-id"
                data-indeterminate="false"
                name="orderValueRestricted"
                type="checkbox"
              />
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <svg
                  fill="none"
                  height="24"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <rect
                    fill="currentColor"
                    height="23"
                    rx="1.5"
                    width="23"
                    x="0.5"
                    y="0.5"
                  />
                  <path
                    clip-rule="evenodd"
                    d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                    fill="var(--background-paper)"
                    fill-rule="evenodd"
                  />
                </svg>
              </svg>
            </span>
          </span>
          <span
            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
          >
            Restrict order value
            <div
              class="MuiTypography-root-id MuiTypography-caption-id"
            >
              This rate will apply to all orders
            </div>
          </span>
        </label>
        <div
          class="VerticalSpacer-container-id VerticalSpacer-container-id"
        />
        Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
        <div
          class="VerticalSpacer-container-id VerticalSpacer-container-id"
        />
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id OrderValue-table-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colName-id"
                scope="col"
              >
                <span>
                  Channel name
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colType-id"
                scope="col"
              >
                <span>
                  Min. value
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colType-id"
                scope="col"
              >
                <span>
                  Max. value
                </span>
              </th>
            </tr>
          </thead>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Channel USD
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderValue-price-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Min Value
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      name="minValue:Channel USD"
                      step="0.01"
                      type="number"
                      value="1"
                    />
                    <div
                      class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        USD
                      </div>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Min Value
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderValue-price-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Max Value
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="1"
                      name="maxValue:Channel USD"
                      step="0.01"
                      type="number"
                      value="2"
                    />
                    <div
                      class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        USD
                      </div>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Max Value
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Shipping / Order value rates loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Order Value
        </span>
      </div>
    </div>
    <div
      class="OrderValue-content-id"
    >
      <div
        class="OrderValue-subheader-id"
      >
        <label
          class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
        >
          <span
            aria-disabled="true"
            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
            tabindex="-1"
          >
            <span
              class="MuiIconButton-label-id"
            >
              <input
                checked=""
                class="PrivateSwitchBase-input-id"
                data-indeterminate="false"
                disabled=""
                name="orderValueRestricted"
                type="checkbox"
              />
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <svg
                  fill="none"
                  height="24"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <rect
                    fill="currentColor"
                    height="23"
                    rx="1.5"
                    width="23"
                    x="0.5"
                    y="0.5"
                  />
                  <path
                    clip-rule="evenodd"
                    d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                    fill="var(--background-paper)"
                    fill-rule="evenodd"
                  />
                </svg>
              </svg>
            </span>
          </span>
          <span
            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
          >
            Restrict order value
            <div
              class="MuiTypography-root-id MuiTypography-caption-id"
            >
              This rate will apply to all orders
            </div>
          </span>
        </label>
        <div
          class="VerticalSpacer-container-id VerticalSpacer-container-id"
        />
        Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
        <div
          class="VerticalSpacer-container-id VerticalSpacer-container-id"
        />
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id OrderValue-table-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colName-id"
                scope="col"
              >
                <span>
                  Channel name
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colType-id"
                scope="col"
              >
                <span>
                  Min. value
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colType-id"
                scope="col"
              >
                <span>
                  Max. value
                </span>
              </th>
            </tr>
          </thead>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Channel USD
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderValue-price-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Min Value
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      disabled=""
                      min="0"
                      name="minValue:Channel USD"
                      step="0.01"
                      type="number"
                      value="1"
                    />
                    <div
                      class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        USD
                      </div>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Min Value
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderValue-price-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Max Value
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      disabled=""
                      min="1"
                      name="maxValue:Channel USD"
                      step="0.01"
                      type="number"
                      value="2"
                    />
                    <div
                      class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        USD
                      </div>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Max Value
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Shipping / Order weight rates default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Order Weight
        </span>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id"
    >
      <label
        class="MuiFormControlLabel-root-id"
      >
        <span
          aria-disabled="false"
          class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
        >
          <span
            class="MuiIconButton-label-id"
          >
            <input
              checked=""
              class="PrivateSwitchBase-input-id"
              data-indeterminate="false"
              name="orderValueRestricted"
              type="checkbox"
            />
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <svg
                fill="none"
                height="24"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <rect
                  fill="currentColor"
                  height="23"
                  rx="1.5"
                  width="23"
                  x="0.5"
                  y="0.5"
                />
                <path
                  clip-rule="evenodd"
                  d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                  fill="var(--background-paper)"
                  fill-rule="evenodd"
                />
              </svg>
            </svg>
          </span>
        </span>
        <span
          class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
        >
          Restrict order weight
          <div
            class="MuiTypography-root-id MuiTypography-caption-id"
          >
            This rate will apply to all orders
          </div>
        </span>
      </label>
      <div
        class="VerticalSpacer-container-id VerticalSpacer-container-id"
      />
      <div
        class="OrderWeight-grid-id"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
            data-shrink="true"
          >
            Min. Order Weight
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
              min="0"
              name="minValue"
              type="number"
              value="1"
            />
            <div
              class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              />
            </div>
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
              >
                <span>
                  Min. Order Weight
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
            data-shrink="true"
          >
            Max. Order Weight
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
              min="1"
              name="maxValue"
              type="number"
              value="2"
            />
            <div
              class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              />
            </div>
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
              >
                <span>
                  Max. Order Weight
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Shipping / Order weight rates form errors 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Order Weight
        </span>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id"
    >
      <label
        class="MuiFormControlLabel-root-id"
      >
        <span
          aria-disabled="false"
          class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
        >
          <span
            class="MuiIconButton-label-id"
          >
            <input
              checked=""
              class="PrivateSwitchBase-input-id"
              data-indeterminate="false"
              name="orderValueRestricted"
              type="checkbox"
            />
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <svg
                fill="none"
                height="24"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <rect
                  fill="currentColor"
                  height="23"
                  rx="1.5"
                  width="23"
                  x="0.5"
                  y="0.5"
                />
                <path
                  clip-rule="evenodd"
                  d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                  fill="var(--background-paper)"
                  fill-rule="evenodd"
                />
              </svg>
            </svg>
          </span>
        </span>
        <span
          class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
        >
          Restrict order weight
          <div
            class="MuiTypography-root-id MuiTypography-caption-id"
          >
            This rate will apply to all orders
          </div>
        </span>
      </label>
      <div
        class="VerticalSpacer-container-id VerticalSpacer-container-id"
      />
      <div
        class="OrderWeight-grid-id"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
            data-shrink="true"
          >
            Min. Order Weight
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
          >
            <input
              aria-invalid="true"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
              min="0"
              name="minValue"
              type="number"
              value="1"
            />
            <div
              class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              />
            </div>
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
              >
                <span>
                  Min. Order Weight
                </span>
              </legend>
            </fieldset>
          </div>
          <p
            class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
          >
            Value is invalid
          </p>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
            data-shrink="true"
          >
            Max. Order Weight
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
          >
            <input
              aria-invalid="true"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
              min="1"
              name="maxValue"
              type="number"
              value="2"
            />
            <div
              class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              />
            </div>
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
              >
                <span>
                  Max. Order Weight
                </span>
              </legend>
            </fieldset>
          </div>
          <p
            class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
          >
            Value is invalid
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Shipping / Order weight rates loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Order Weight
        </span>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id"
    >
      <label
        class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
      >
        <span
          aria-disabled="true"
          class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
          tabindex="-1"
        >
          <span
            class="MuiIconButton-label-id"
          >
            <input
              checked=""
              class="PrivateSwitchBase-input-id"
              data-indeterminate="false"
              disabled=""
              name="orderValueRestricted"
              type="checkbox"
            />
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <svg
                fill="none"
                height="24"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <rect
                  fill="currentColor"
                  height="23"
                  rx="1.5"
                  width="23"
                  x="0.5"
                  y="0.5"
                />
                <path
                  clip-rule="evenodd"
                  d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                  fill="var(--background-paper)"
                  fill-rule="evenodd"
                />
              </svg>
            </svg>
          </span>
        </span>
        <span
          class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
        >
          Restrict order weight
          <div
            class="MuiTypography-root-id MuiTypography-caption-id"
          >
            This rate will apply to all orders
          </div>
        </span>
      </label>
      <div
        class="VerticalSpacer-container-id VerticalSpacer-container-id"
      />
      <div
        class="OrderWeight-grid-id"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
            data-shrink="true"
          >
            Min. Order Weight
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
              disabled=""
              min="0"
              name="minValue"
              type="number"
              value="1"
            />
            <div
              class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              />
            </div>
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
              >
                <span>
                  Min. Order Weight
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
            data-shrink="true"
          >
            Max. Order Weight
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
              disabled=""
              min="1"
              name="maxValue"
              type="number"
              value="2"
            />
            <div
              class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              />
            </div>
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
              >
                <span>
                  Max. Order Weight
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Shipping / Order weight rates new 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Order Weight
        </span>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id"
    >
      <label
        class="MuiFormControlLabel-root-id"
      >
        <span
          aria-disabled="false"
          class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
        >
          <span
            class="MuiIconButton-label-id"
          >
            <input
              checked=""
              class="PrivateSwitchBase-input-id"
              data-indeterminate="false"
              name="orderValueRestricted"
              type="checkbox"
            />
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <svg
                fill="none"
                height="24"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <rect
                  fill="currentColor"
                  height="23"
                  rx="1.5"
                  width="23"
                  x="0.5"
                  y="0.5"
                />
                <path
                  clip-rule="evenodd"
                  d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                  fill="var(--background-paper)"
                  fill-rule="evenodd"
                />
              </svg>
            </svg>
          </span>
        </span>
        <span
          class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
        >
          Restrict order weight
          <div
            class="MuiTypography-root-id MuiTypography-caption-id"
          >
            This rate will apply to all orders
          </div>
        </span>
      </label>
      <div
        class="VerticalSpacer-container-id VerticalSpacer-container-id"
      />
      <div
        class="OrderWeight-grid-id"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
            data-shrink="false"
          >
            Min. Order Weight
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
              min="0"
              name="minValue"
              type="number"
              value=""
            />
            <div
              class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              />
            </div>
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id"
              >
                <span>
                  Min. Order Weight
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
            data-shrink="false"
          >
            Max. Order Weight
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
              min=""
              name="maxValue"
              type="number"
              value=""
            />
            <div
              class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              />
            </div>
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id"
              >
                <span>
                  Max. Order Weight
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Shipping / Pricing Card default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Pricing
        </span>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id PricingCard-pricingContent-id"
    >
      <div
        class="MuiTypography-root-id PricingCard-caption-id MuiTypography-caption-id"
      >
        Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id PricingCard-table-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colName-id"
                scope="col"
              >
                <span>
                  Channel name
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colType-id"
                scope="col"
              >
                <span>
                  Price
                </span>
              </th>
            </tr>
          </thead>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Channel USD
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id MuiFormLabel-required-id MuiInputLabel-required-id"
                    data-shrink="true"
                  >
                    Price
                    <span
                      aria-hidden="true"
                      class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
                    >
                       *
                    </span>
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      name="price"
                      required=""
                      step="0.01"
                      type="number"
                      value="86.21"
                    />
                    <div
                      class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        USD
                      </div>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Price *
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Shipping / Pricing Card loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Pricing
        </span>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id PricingCard-pricingContent-id"
    >
      <div
        class="MuiTypography-root-id PricingCard-caption-id MuiTypography-caption-id"
      >
        Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id PricingCard-table-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colName-id"
                scope="col"
              >
                <span>
                  Channel name
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colType-id"
                scope="col"
              >
                <span>
                  Price
                </span>
              </th>
            </tr>
          </thead>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Channel USD
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiFormLabel-required-id MuiInputLabel-required-id"
                    data-shrink="true"
                  >
                    Price
                    <span
                      aria-hidden="true"
                      class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
                    >
                       *
                    </span>
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      disabled=""
                      min="0"
                      name="price"
                      required=""
                      step="0.01"
                      type="number"
                      value="86.21"
                    />
                    <div
                      class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        USD
                      </div>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Price *
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Shipping / ShippingMethodProducts default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Excluded Products
        </span>
      </div>
      <div
        class="MuiCardHeader-action-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            Assign products
          </span>
        </button>
      </div>
    </div>
    <div
      class="ResponsiveTable-root-id"
    >
      <table
        class="MuiTable-root-id ShippingMethodProducts-table-id"
      >
        <thead
          class="MuiTableHead-root-id"
        >
          <tr
            class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
          >
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
              scope="col"
            >
              <span
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <input
                    checked=""
                    class="PrivateSwitchBase-input-id"
                    data-indeterminate="false"
                    type="checkbox"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <svg
                      fill="none"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <rect
                        fill="currentColor"
                        height="23"
                        rx="1.5"
                        width="23"
                        x="0.5"
                        y="0.5"
                      />
                      <path
                        clip-rule="evenodd"
                        d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                        fill="var(--background-paper)"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </svg>
                </span>
              </span>
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id TableHead-root-id"
              colspan="2"
              scope="col"
            >
              <div
                class="TableHead-container-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Selected 1 items
                </div>
                <div
                  class="TableHead-spacer-id"
                />
                <div
                  class="TableHead-toolbar-id"
                />
              </div>
            </th>
          </tr>
        </thead>
        <tfoot
          class="MuiTableFooter-root-id"
        >
          <tr
            class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-footer-id"
              colspan="3"
            >
              <div
                class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
              >
                <div
                  class="Pagination-spacer-id"
                />
                <div
                  class="Pagination-actions-id"
                >
                  <button
                    aria-label="previous page"
                    class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                    data-test="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                      />
                    </svg>
                  </button>
                  <button
                    aria-label="next page"
                    class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                    data-test="button-pagination-next"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                      />
                    </svg>
                  </button>
                </div>
              </div>
            </td>
          </tr>
        </tfoot>
        <tbody
          class="MuiTableBody-root-id"
        >
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <span
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <input
                    class="PrivateSwitchBase-input-id"
                    data-indeterminate="false"
                    type="checkbox"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="22"
                      rx="2"
                      ry="2"
                      stroke="currentColor"
                      stroke-linejoin="round"
                      stroke-width="2"
                      width="22"
                      x="1"
                      y="1"
                    />
                  </svg>
                </span>
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ShippingMethodProducts-colName-id"
              data-test-id="table-cell-avatar"
              thumbnail=""
            >
              <div
                class="Avatar-content-id"
              >
                <div
                  class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      clip-rule="evenodd"
                      d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
                <div
                  class="Avatar-children-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body2-id"
                  >
                    Apple Juice
                  </div>
                </div>
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id ShippingMethodProducts-colAction-id"
            >
              <button
                class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                tabindex="0"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                  fill="none"
                  focusable="false"
                  height="24"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="1.5"
                  />
                </svg>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
`;

exports[`Storyshots Shipping / ShippingMethodProductsAddDialog default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page create price 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Price Rate Create
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Shipping rate name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Shipping rate name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-description"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Shipping Rate Description
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                />
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="ShippingRateInfo-deliveryTimeFields-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Min Delivery Time
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      name="minDays"
                      type="number"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Min Delivery Time
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Max Delivery Time
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      name="maxDays"
                      type="number"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Max Delivery Time
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Order Value
                </span>
              </div>
            </div>
            <div
              class="OrderValue-content-id"
            >
              <div
                class="OrderValue-subheader-id"
              >
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        checked=""
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="orderValueRestricted"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <svg
                          fill="none"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <rect
                            fill="currentColor"
                            height="23"
                            rx="1.5"
                            width="23"
                            x="0.5"
                            y="0.5"
                          />
                          <path
                            clip-rule="evenodd"
                            d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                            fill="var(--background-paper)"
                            fill-rule="evenodd"
                          />
                        </svg>
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Restrict order value
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      This rate will apply to all orders
                    </div>
                  </span>
                </label>
                <div
                  class="VerticalSpacer-container-id VerticalSpacer-container-id"
                />
                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
                <div
                  class="VerticalSpacer-container-id VerticalSpacer-container-id"
                />
              </div>
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id OrderValue-table-id"
                >
                  <thead
                    class="MuiTableHead-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                    >
                      <th
                        class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colName-id"
                        scope="col"
                      >
                        <span>
                          Channel name
                        </span>
                      </th>
                      <th
                        class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colType-id"
                        scope="col"
                      >
                        <span>
                          Min. value
                        </span>
                      </th>
                      <th
                        class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colType-id"
                        scope="col"
                      >
                        <span>
                          Max. value
                        </span>
                      </th>
                    </tr>
                  </thead>
                  <tbody
                    class="MuiTableBody-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-hover-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          channel
                        </div>
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id OrderValue-price-id"
                      >
                        <div
                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                        >
                          <label
                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                            data-shrink="false"
                          >
                            Min Value
                          </label>
                          <div
                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                          >
                            <input
                              aria-invalid="false"
                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                              min="0"
                              name="minValue:channel"
                              step="0.01"
                              type="number"
                              value=""
                            />
                            <div
                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                              >
                                USD
                              </div>
                            </div>
                            <fieldset
                              aria-hidden="true"
                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            >
                              <legend
                                class="PrivateNotchedOutline-legendLabelled-id"
                              >
                                <span>
                                  Min Value
                                </span>
                              </legend>
                            </fieldset>
                          </div>
                        </div>
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id OrderValue-price-id"
                      >
                        <div
                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                        >
                          <label
                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                            data-shrink="false"
                          >
                            Max Value
                          </label>
                          <div
                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                          >
                            <input
                              aria-invalid="false"
                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                              min=""
                              name="maxValue:channel"
                              step="0.01"
                              type="number"
                              value=""
                            />
                            <div
                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                              >
                                USD
                              </div>
                            </div>
                            <fieldset
                              aria-hidden="true"
                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            >
                              <legend
                                class="PrivateNotchedOutline-legendLabelled-id"
                              >
                                <span>
                                  Max Value
                                </span>
                              </legend>
                            </fieldset>
                          </div>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Pricing
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id PricingCard-pricingContent-id"
            >
              <div
                class="MuiTypography-root-id PricingCard-caption-id MuiTypography-caption-id"
              >
                Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
              </div>
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id PricingCard-table-id"
                >
                  <thead
                    class="MuiTableHead-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                    >
                      <th
                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colName-id"
                        scope="col"
                      >
                        <span>
                          Channel name
                        </span>
                      </th>
                      <th
                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colType-id"
                        scope="col"
                      >
                        <span>
                          Price
                        </span>
                      </th>
                    </tr>
                  </thead>
                  <tbody
                    class="MuiTableBody-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-hover-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          channel
                        </div>
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id"
                      >
                        <div
                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                        >
                          <label
                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-required-id MuiInputLabel-required-id"
                            data-shrink="false"
                          >
                            Price
                            <span
                              aria-hidden="true"
                              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
                            >
                               *
                            </span>
                          </label>
                          <div
                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                          >
                            <input
                              aria-invalid="false"
                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                              min="0"
                              name="price"
                              required=""
                              step="0.01"
                              type="number"
                              value=""
                            />
                            <div
                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                              >
                                USD
                              </div>
                            </div>
                            <fieldset
                              aria-hidden="true"
                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            >
                              <legend
                                class="PrivateNotchedOutline-legendLabelled-id"
                              >
                                <span>
                                  Price *
                                </span>
                              </legend>
                            </fieldset>
                          </div>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Postal codes
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="add-postal-code-range"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Add postal code range
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id ShippingZonePostalCodes-radioContainer-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="includePostalCodes"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="includePostalCodes"
                          type="radio"
                          value="EXCLUDE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      <div
                        class="ShippingZonePostalCodes-option-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Exclude postal codes
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          Added postal codes will be excluded from using this delivery methods. If none are added all postal codes will be able to use that shipping rate
                        </div>
                      </div>
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="includePostalCodes"
                          type="radio"
                          value="INCLUDE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      <div
                        class="ShippingZonePostalCodes-option-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Include postal codes
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          Only added postal codes will be able to use this shipping rate
                        </div>
                      </div>
                    </span>
                  </label>
                </div>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <colgroup>
                  <col />
                  <col
                    class="ShippingZonePostalCodes-colAction-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        2 postal code ranges
                      </div>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id ShippingZonePostalCodes-arrow-id ShippingZonePostalCodes-arrowRotate-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <g
                            style="fill-rule:evenodd"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                          </g>
                        </svg>
                      </button>
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      51-220 - 51-200
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
                        data-test-id="delete-postal-code-1"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      44-205 - 31-101
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
                        data-test-id="delete-postal-code-1"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 1 out of 3 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page create weight 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Weight Rate Create
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Shipping rate name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Shipping rate name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-description"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Shipping Rate Description
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                />
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="ShippingRateInfo-deliveryTimeFields-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Min Delivery Time
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      name="minDays"
                      type="number"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Min Delivery Time
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Max Delivery Time
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      name="maxDays"
                      type="number"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Max Delivery Time
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Order Weight
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="orderValueRestricted"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Restrict order weight
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    This rate will apply to all orders
                  </div>
                </span>
              </label>
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <div
                class="OrderWeight-grid-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Min. Order Weight
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      name="minValue"
                      type="number"
                      value=""
                    />
                    <div
                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      />
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Min. Order Weight
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Max. Order Weight
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min=""
                      name="maxValue"
                      type="number"
                      value=""
                    />
                    <div
                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      />
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Max. Order Weight
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Pricing
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id PricingCard-pricingContent-id"
            >
              <div
                class="MuiTypography-root-id PricingCard-caption-id MuiTypography-caption-id"
              >
                Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
              </div>
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id PricingCard-table-id"
                >
                  <thead
                    class="MuiTableHead-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                    >
                      <th
                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colName-id"
                        scope="col"
                      >
                        <span>
                          Channel name
                        </span>
                      </th>
                      <th
                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colType-id"
                        scope="col"
                      >
                        <span>
                          Price
                        </span>
                      </th>
                    </tr>
                  </thead>
                  <tbody
                    class="MuiTableBody-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-hover-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          channel
                        </div>
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id"
                      >
                        <div
                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                        >
                          <label
                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id MuiFormLabel-required-id MuiInputLabel-required-id"
                            data-shrink="true"
                          >
                            Price
                            <span
                              aria-hidden="true"
                              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
                            >
                               *
                            </span>
                          </label>
                          <div
                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                          >
                            <input
                              aria-invalid="false"
                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                              min="0"
                              name="price"
                              required=""
                              step="0.01"
                              type="number"
                              value="5"
                            />
                            <div
                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                              >
                                USD
                              </div>
                            </div>
                            <fieldset
                              aria-hidden="true"
                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            >
                              <legend
                                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                              >
                                <span>
                                  Price *
                                </span>
                              </legend>
                            </fieldset>
                          </div>
                        </div>
                      </td>
                    </tr>
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-hover-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          test
                        </div>
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id"
                      >
                        <div
                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                        >
                          <label
                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id MuiFormLabel-required-id MuiInputLabel-required-id"
                            data-shrink="true"
                          >
                            Price
                            <span
                              aria-hidden="true"
                              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
                            >
                               *
                            </span>
                          </label>
                          <div
                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                          >
                            <input
                              aria-invalid="false"
                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                              min="0"
                              name="price"
                              required=""
                              step="0.01"
                              type="number"
                              value="6"
                            />
                            <div
                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                              >
                                USD
                              </div>
                            </div>
                            <fieldset
                              aria-hidden="true"
                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            >
                              <legend
                                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                              >
                                <span>
                                  Price *
                                </span>
                              </legend>
                            </fieldset>
                          </div>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Postal codes
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="add-postal-code-range"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Add postal code range
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id ShippingZonePostalCodes-radioContainer-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="includePostalCodes"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="includePostalCodes"
                          type="radio"
                          value="EXCLUDE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      <div
                        class="ShippingZonePostalCodes-option-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Exclude postal codes
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          Added postal codes will be excluded from using this delivery methods. If none are added all postal codes will be able to use that shipping rate
                        </div>
                      </div>
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="includePostalCodes"
                          type="radio"
                          value="INCLUDE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      <div
                        class="ShippingZonePostalCodes-option-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Include postal codes
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          Only added postal codes will be able to use this shipping rate
                        </div>
                      </div>
                    </span>
                  </label>
                </div>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <colgroup>
                  <col />
                  <col
                    class="ShippingZonePostalCodes-colAction-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        2 postal code ranges
                      </div>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id ShippingZonePostalCodes-arrow-id ShippingZonePostalCodes-arrowRotate-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <g
                            style="fill-rule:evenodd"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                          </g>
                        </svg>
                      </button>
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      51-220 - 51-200
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
                        data-test-id="delete-postal-code-1"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      44-205 - 31-101
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
                        data-test-id="delete-postal-code-1"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 2 out of 3 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Price Rate Create
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Shipping rate name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Shipping rate name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-description"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Shipping Rate Description
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
                />
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="ShippingRateInfo-deliveryTimeFields-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Min Delivery Time
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      min="0"
                      name="minDays"
                      type="number"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Min Delivery Time
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Max Delivery Time
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      min="0"
                      name="maxDays"
                      type="number"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Max Delivery Time
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Order Value
                </span>
              </div>
            </div>
            <div
              class="OrderValue-content-id"
            >
              <div
                class="OrderValue-subheader-id"
              >
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <span
                    aria-disabled="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                    tabindex="-1"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        checked=""
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        disabled=""
                        name="orderValueRestricted"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <svg
                          fill="none"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <rect
                            fill="currentColor"
                            height="23"
                            rx="1.5"
                            width="23"
                            x="0.5"
                            y="0.5"
                          />
                          <path
                            clip-rule="evenodd"
                            d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                            fill="var(--background-paper)"
                            fill-rule="evenodd"
                          />
                        </svg>
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Restrict order value
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      This rate will apply to all orders
                    </div>
                  </span>
                </label>
                <div
                  class="VerticalSpacer-container-id VerticalSpacer-container-id"
                />
                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
                <div
                  class="VerticalSpacer-container-id VerticalSpacer-container-id"
                />
              </div>
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id OrderValue-table-id"
                >
                  <thead
                    class="MuiTableHead-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                    >
                      <th
                        class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colName-id"
                        scope="col"
                      >
                        <span>
                          Channel name
                        </span>
                      </th>
                      <th
                        class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colType-id"
                        scope="col"
                      >
                        <span>
                          Min. value
                        </span>
                      </th>
                      <th
                        class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colType-id"
                        scope="col"
                      >
                        <span>
                          Max. value
                        </span>
                      </th>
                    </tr>
                  </thead>
                  <tbody
                    class="MuiTableBody-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-hover-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          channel
                        </div>
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id OrderValue-price-id"
                      >
                        <div
                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                        >
                          <label
                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                            data-shrink="false"
                          >
                            Min Value
                          </label>
                          <div
                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                          >
                            <input
                              aria-invalid="false"
                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                              disabled=""
                              min="0"
                              name="minValue:channel"
                              step="0.01"
                              type="number"
                              value=""
                            />
                            <div
                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                              >
                                USD
                              </div>
                            </div>
                            <fieldset
                              aria-hidden="true"
                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            >
                              <legend
                                class="PrivateNotchedOutline-legendLabelled-id"
                              >
                                <span>
                                  Min Value
                                </span>
                              </legend>
                            </fieldset>
                          </div>
                        </div>
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id OrderValue-price-id"
                      >
                        <div
                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                        >
                          <label
                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                            data-shrink="false"
                          >
                            Max Value
                          </label>
                          <div
                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                          >
                            <input
                              aria-invalid="false"
                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                              disabled=""
                              min=""
                              name="maxValue:channel"
                              step="0.01"
                              type="number"
                              value=""
                            />
                            <div
                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                              >
                                USD
                              </div>
                            </div>
                            <fieldset
                              aria-hidden="true"
                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            >
                              <legend
                                class="PrivateNotchedOutline-legendLabelled-id"
                              >
                                <span>
                                  Max Value
                                </span>
                              </legend>
                            </fieldset>
                          </div>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Pricing
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id PricingCard-pricingContent-id"
            >
              <div
                class="MuiTypography-root-id PricingCard-caption-id MuiTypography-caption-id"
              >
                Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
              </div>
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id PricingCard-table-id"
                >
                  <thead
                    class="MuiTableHead-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                    >
                      <th
                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colName-id"
                        scope="col"
                      >
                        <span>
                          Channel name
                        </span>
                      </th>
                      <th
                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colType-id"
                        scope="col"
                      >
                        <span>
                          Price
                        </span>
                      </th>
                    </tr>
                  </thead>
                  <tbody
                    class="MuiTableBody-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-hover-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          channel
                        </div>
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id"
                      >
                        <div
                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                        >
                          <label
                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-required-id MuiInputLabel-required-id"
                            data-shrink="false"
                          >
                            Price
                            <span
                              aria-hidden="true"
                              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
                            >
                               *
                            </span>
                          </label>
                          <div
                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                          >
                            <input
                              aria-invalid="false"
                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                              disabled=""
                              min="0"
                              name="price"
                              required=""
                              step="0.01"
                              type="number"
                              value=""
                            />
                            <div
                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                              >
                                USD
                              </div>
                            </div>
                            <fieldset
                              aria-hidden="true"
                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            >
                              <legend
                                class="PrivateNotchedOutline-legendLabelled-id"
                              >
                                <span>
                                  Price *
                                </span>
                              </legend>
                            </fieldset>
                          </div>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Postal codes
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="add-postal-code-range"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Add postal code range
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id ShippingZonePostalCodes-radioContainer-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="includePostalCodes"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="includePostalCodes"
                          type="radio"
                          value="EXCLUDE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      <div
                        class="ShippingZonePostalCodes-option-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Exclude postal codes
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          Added postal codes will be excluded from using this delivery methods. If none are added all postal codes will be able to use that shipping rate
                        </div>
                      </div>
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="includePostalCodes"
                          type="radio"
                          value="INCLUDE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      <div
                        class="ShippingZonePostalCodes-option-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Include postal codes
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          Only added postal codes will be able to use this shipping rate
                        </div>
                      </div>
                    </span>
                  </label>
                </div>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <colgroup>
                  <col />
                  <col
                    class="ShippingZonePostalCodes-colAction-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        2 postal code ranges
                      </div>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id ShippingZonePostalCodes-arrow-id ShippingZonePostalCodes-arrowRotate-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <g
                            style="fill-rule:evenodd"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                          </g>
                        </svg>
                      </button>
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      51-220 - 51-200
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        data-test-id="delete-postal-code-1"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      44-205 - 31-101
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        data-test-id="delete-postal-code-1"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 1 out of 3 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Shipping / UnassignDialog default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Shipping zones details / Settings Card default 1`] = `
<div
  style="margin:auto;overflow:visible;min-height:800px;width:400px;display:flex;justify-content:center;align-items:center"
>
  <div
    style="padding:24px"
  >
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            Settings
          </span>
        </div>
      </div>
      <div
        class="MuiCardContent-root-id"
      >
        Assign channels to this shipping zone so we know which orders will be supported
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          aria-expanded="false"
          aria-haspopup="listbox"
          aria-labelledby="downshift-42-label"
          class="MultiAutocompleteSelectField-container-id"
          role="combobox"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
              data-shrink="false"
            >
              Channel
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-autocomplete="list"
                aria-invalid="false"
                aria-labelledby="downshift-42-label"
                autocomplete="off"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                id="downshift-42-menu"
                placeholder="Add Channel"
                role="listbox"
                testid="channels"
                type="text"
                value=""
              />
              <div
                aria-haspopup="true"
                aria-label="open menu"
                class="MultiAutocompleteSelectField-adornment-id"
                data-toggle="true"
                role="button"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="24"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m8 10 4 4 4-4"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="1.5"
                  />
                </svg>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id"
                >
                  <span>
                    Channel
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="MultiAutocompleteSelectField-chipContainer-id"
        >
          <div
            class="MultiAutocompleteSelectField-chip-id"
          >
            <div
              class="MultiAutocompleteSelectField-chipInner-id"
            >
              <div
                class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
              >
                GBP
              </div>
              <button
                class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                data-test-id="channels-remove"
                tabindex="0"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                  />
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
      <hr
        class="MuiDivider-root-id"
      />
      <div
        class="MuiCardContent-root-id"
      >
        Select warehouse from which you will ship products for this shipping zone. This warehouse address will also be used to calculate taxes.
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          aria-expanded="false"
          aria-haspopup="listbox"
          aria-labelledby="downshift-43-label"
          class="MultiAutocompleteSelectField-container-id"
          role="combobox"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
              data-shrink="false"
            >
              Warehouse
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-autocomplete="list"
                aria-invalid="false"
                aria-labelledby="downshift-43-label"
                autocomplete="off"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                id="downshift-43-menu"
                placeholder="Select Warehouse"
                role="listbox"
                testid="warehouses"
                type="text"
                value=""
              />
              <div
                aria-haspopup="true"
                aria-label="open menu"
                class="MultiAutocompleteSelectField-adornment-id"
                data-toggle="true"
                role="button"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="24"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m8 10 4 4 4-4"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="1.5"
                  />
                </svg>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id"
                >
                  <span>
                    Warehouse
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="MultiAutocompleteSelectField-chipContainer-id"
        >
          <div
            class="MultiAutocompleteSelectField-chip-id"
          >
            <div
              class="MultiAutocompleteSelectField-chipInner-id"
            >
              <div
                class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
              >
                Asia Warehouse
              </div>
              <button
                class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                data-test-id="warehouses-remove"
                tabindex="0"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                  />
                </svg>
              </button>
            </div>
          </div>
          <div
            class="MultiAutocompleteSelectField-chip-id"
          >
            <div
              class="MultiAutocompleteSelectField-chipInner-id"
            >
              <div
                class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
              >
                Europe Warehouse
              </div>
              <button
                class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                data-test-id="warehouses-remove"
                tabindex="0"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                  />
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Shipping zones with no options selected 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Shipping Zones
        </span>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        Select shipping zones that will be supplied via this channel. You can assign shipping zones to multiple channels.
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiAccordion-root-id Expander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
    >
      <div
        class="AssignmentListHeader-container-id"
      >
        <div
          aria-disabled="false"
          aria-expanded="false"
          class="MuiButtonBase-root-id MuiAccordionSummary-root-id AssignmentListHeader-root-id"
          role="button"
          tabindex="0"
        >
          <div
            class="MuiAccordionSummary-content-id AssignmentListHeader-content-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
            >
              0 / 0 shipping zones
            </div>
          </div>
          <div
            aria-disabled="false"
            aria-hidden="true"
            class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
          >
            <span
              class="MuiIconButton-label-id"
            >
              <svg
                data-test-id="expand-icon"
                fill="none"
                height="7"
                viewBox="0 0 10 7"
                width="10"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M1 1L5 5L9 1"
                  stroke="#28234A"
                  stroke-opacity="0.4"
                  stroke-width="2"
                />
              </svg>
            </span>
          </div>
        </div>
        <div
          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
        />
      </div>
      <div
        class="MuiCollapse-container-id MuiCollapse-hidden-id"
        style="min-height:0px"
      >
        <div
          class="MuiCollapse-wrapper-id"
        >
          <div
            class="MuiCollapse-wrapperInner-id"
          >
            <div
              role="region"
            >
              <hr
                class="MuiDivider-root-id"
              />
              <div
                class="MuiTypography-root-id AssignmentList-infoMessage-id MuiTypography-subtitle1-id MuiTypography-colorTextSecondary-id"
              >
                All available shipping zones have been selected
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Shipping zones with options selected 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Shipping Zones
        </span>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        Select shipping zones that will be supplied via this channel. You can assign shipping zones to multiple channels.
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiAccordion-root-id Expander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
    >
      <div
        class="AssignmentListHeader-container-id"
      >
        <div
          aria-disabled="false"
          aria-expanded="false"
          class="MuiButtonBase-root-id MuiAccordionSummary-root-id AssignmentListHeader-root-id"
          role="button"
          tabindex="0"
        >
          <div
            class="MuiAccordionSummary-content-id AssignmentListHeader-content-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
            >
              2 / 0 shipping zones
            </div>
          </div>
          <div
            aria-disabled="false"
            aria-hidden="true"
            class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
          >
            <span
              class="MuiIconButton-label-id"
            >
              <svg
                data-test-id="expand-icon"
                fill="none"
                height="7"
                viewBox="0 0 10 7"
                width="10"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M1 1L5 5L9 1"
                  stroke="#28234A"
                  stroke-opacity="0.4"
                  stroke-width="2"
                />
              </svg>
            </span>
          </div>
        </div>
        <div
          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
        />
      </div>
      <div
        class="MuiCollapse-container-id MuiCollapse-hidden-id"
        style="min-height:0px"
      >
        <div
          class="MuiCollapse-wrapper-id"
        >
          <div
            class="MuiCollapse-wrapperInner-id"
          >
            <div
              role="region"
            >
              <hr
                class="MuiDivider-root-id"
              />
              <div
                class="AssignmentList-container-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Fancy shipping zone
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </div>
              <hr
                class="MuiDivider-root-id"
              />
              <div
                class="AssignmentList-container-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Nice shipping zone
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </div>
              <hr
                class="MuiDivider-root-id"
              />
              <div
                class="CardAddItemsFooter-container-id"
              >
                <a
                  class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                  data-test-id="shipping-add-link"
                >
                  Add Shipping Zones
                </a>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  data-test-id="shipping-add-button"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                    />
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots TypeDeleteWarningDialog.stories loading 1`] = `
<div
  style="margin:auto;overflow:visible;min-height:800px;width:400px;display:flex;justify-content:center;align-items:center"
>
  <div
    style="padding:24px"
  />
</div>
`;

exports[`Storyshots TypeDeleteWarningDialog.stories multiple type no assigned items 1`] = `
<div
  style="margin:auto;overflow:visible;min-height:800px;width:400px;display:flex;justify-content:center;align-items:center"
>
  <div
    style="padding:24px"
  />
</div>
`;

exports[`Storyshots TypeDeleteWarningDialog.stories multiple types some assigned items 1`] = `
<div
  style="margin:auto;overflow:visible;min-height:800px;width:400px;display:flex;justify-content:center;align-items:center"
>
  <div
    style="padding:24px"
  />
</div>
`;

exports[`Storyshots TypeDeleteWarningDialog.stories single type no assigned items 1`] = `
<div
  style="margin:auto;overflow:visible;min-height:800px;width:400px;display:flex;justify-content:center;align-items:center"
>
  <div
    style="padding:24px"
  />
</div>
`;

exports[`Storyshots TypeDeleteWarningDialog.stories single type some assigned items 1`] = `
<div
  style="margin:auto;overflow:visible;min-height:800px;width:400px;display:flex;justify-content:center;align-items:center"
>
  <div
    style="padding:24px"
  />
</div>
`;

exports[`Storyshots Views / Apps / Activate app default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Views / Apps / Activate app unnamed app 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Views / Apps / App default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="Grid-root-id Grid-uniform-id"
    >
      <div
        class="AppPage-breadcrumbContainer-id"
      >
        <div
          class="AppPage-breadcrumbs-id"
        >
          <div
            class="MuiTypography-root-id AppPage-breadcrumb-id AppPage-breadcrumbDisabled-id MuiTypography-h5-id"
          >
            app1
          </div>
        </div>
      </div>
      <div
        class="AppPage-appSettingsHeader-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
          href=""
          tabindex="0"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            About
          </span>
        </button>
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
    <hr
      class="Hr-root-id"
    />
    <div
      class="CardSpacer-spacer-id"
    />
    <div
      class="AppPage-iframeContainer-id"
    />
  </div>
</div>
`;

exports[`Storyshots Views / Apps / App details default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          app1 
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-tc="open-app"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Open App
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="AppList-appHeader-id"
    >
      <div
        class="AppList-appHeaderLinks-id"
      >
        <a
          class="ExternalLink-link-id"
          href="http://localhost:8888/support"
          target="_blank"
        >
          <div
            class="MuiTypography-root-id AppList-headerLinkContainer-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
          >
            Get Support
          </div>
        </a>
        <button
          class="MuiButtonBase-root-id AppList-headerLinkContainer-id"
          tabindex="0"
          type="button"
        >
          Deactivate
        </button>
      </div>
      <div
        class="AppList-hr-id"
      />
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            About this app
          </span>
        </div>
      </div>
      <div
        class="MuiCardContent-root-id"
      >
        <p>
          Lorem ipsum
        </p>
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            App permissions
          </span>
        </div>
      </div>
      <div
        class="MuiCardContent-root-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          This app has permissions to:
        </div>
        <ul
          class="AppList-permissionsContainer-id"
        >
          <li>
            Manage orders.
          </li>
          <li>
            Manage customers.
          </li>
        </ul>
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            Data privacy
          </span>
        </div>
      </div>
      <div
        class="MuiCardContent-root-id"
      >
        <a
          class="ExternalLink-link-id"
          href="http://localhost:8888/app-data-privacy"
          target="_blank"
        >
          <div
            class="MuiTypography-root-id AppList-linkContainer-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
          >
            View this app’s privacy policy
          </div>
        </a>
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
  </div>
</div>
`;

exports[`Storyshots Views / Apps / App details loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          app1 
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-tc="open-app"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Open App
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="AppList-appHeader-id"
    >
      <div
        class="AppList-appHeaderLinks-id"
      >
        <a
          class="ExternalLink-link-id"
          href="http://localhost:8888/support"
          target="_blank"
        >
          <div
            class="MuiTypography-root-id AppList-headerLinkContainer-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
          >
            Get Support
          </div>
        </a>
        <button
          class="MuiButtonBase-root-id AppList-headerLinkContainer-id"
          tabindex="0"
          type="button"
        >
          Deactivate
        </button>
      </div>
      <div
        class="AppList-hr-id"
      />
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            About this app
          </span>
        </div>
      </div>
      <div
        class="MuiCardContent-root-id"
      >
        <span
          class="Skeleton-skeleton-id"
          data-test-id="skeleton"
        >
          ‌
        </span>
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            App permissions
          </span>
        </div>
      </div>
      <div
        class="MuiCardContent-root-id"
      >
        <span
          class="Skeleton-skeleton-id"
          data-test-id="skeleton"
        >
          ‌
        </span>
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            Data privacy
          </span>
        </div>
      </div>
      <div
        class="MuiCardContent-root-id"
      >
        <span
          class="Skeleton-skeleton-id"
          data-test-id="skeleton"
        >
          ‌
        </span>
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
  </div>
</div>
`;

exports[`Storyshots Views / Apps / App settings 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="Grid-root-id Grid-uniform-id"
    >
      <div
        class="AppPage-breadcrumbContainer-id"
      >
        <div
          class="AppPage-breadcrumbs-id"
        >
          <div
            class="MuiTypography-root-id AppPage-breadcrumb-id AppPage-breadcrumbDisabled-id MuiTypography-h5-id"
          >
            app1
          </div>
        </div>
      </div>
      <div
        class="AppPage-appSettingsHeader-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
          href=""
          tabindex="0"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            About
          </span>
        </button>
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
    <hr
      class="Hr-root-id"
    />
    <div
      class="CardSpacer-spacer-id"
    />
    <div
      class="AppPage-iframeContainer-id"
    />
  </div>
</div>
`;

exports[`Storyshots Views / Apps / Apps list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Apps
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id AppList-apps-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            Third Party Apps
          </span>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <a
          class="TableRowLink-link-id"
          href="/apps/QXBwOjE3Ng%3D%3D/app"
        />
        <a
          class="TableRowLink-link-id"
          href="/apps/QXBwOjE3Ng%3D%3D/app"
        />
        <table
          class="MuiTable-root-id"
        >
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id AppList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AppList-colName-id"
              >
                <span
                  class="AppList-appName-id"
                  data-tc="name"
                >
                  app
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AppList-colAction-id"
              >
                <div
                  class="MuiTypography-root-id AppList-text-id AppList-manifestUrl-id MuiTypography-body2-id"
                >
                  http://localhost:3000/api/manifest
                </div>
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id PrivateSwitchBase-checked-id MuiSwitch-checked-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        checked=""
                        class="PrivateSwitchBase-input-id MuiSwitch-input-id"
                        type="checkbox"
                      />
                      <span
                        class="MuiSwitch-thumb-id"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-track-id"
                  />
                </span>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="25"
                    viewBox="0 0 24 25"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M19 11V7.414a1 1 0 0 0-.293-.707l-3.415-3.414A1 1 0 0 0 14.585 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h5M8 11h8m-8 3h8m-8 3h3m4 2 1.5 1.5L20 17"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id AppList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AppList-colName-id"
              >
                <span
                  class="AppList-appName-id"
                  data-tc="name"
                >
                  app1
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AppList-colAction-id"
              >
                <div
                  class="MuiTypography-root-id AppList-text-id AppList-manifestUrl-id MuiTypography-body2-id"
                >
                  http://localhost:3000/api/manifest
                </div>
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id MuiSwitch-input-id"
                        type="checkbox"
                      />
                      <span
                        class="MuiSwitch-thumb-id"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-track-id"
                  />
                </span>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="25"
                    viewBox="0 0 24 25"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M19 11V7.414a1 1 0 0 0-.293-.707l-3.415-3.414A1 1 0 0 0 14.585 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h5M8 11h8m-8 3h8m-8 3h3m4 2 1.5 1.5L20 17"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
    <div
      class="MuiPaper-root-id MuiCard-root-id AppList-customApps-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            Internal Apps
          </span>
        </div>
        <div
          class="MuiCardHeader-action-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
            data-test-id="create-app"
            href="/apps/custom/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create App
            </span>
          </a>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id AppList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AppList-colName-id"
              >
                <span
                  class="AppList-appName-id"
                  data-tc="name"
                >
                  app custom
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AppList-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            Ongoing Installations
          </span>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id AppList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AppList-colName-id"
              >
                <span
                  data-tc="name"
                >
                  app
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AppList-colAction-id AppList-colInstallAction-id"
              >
                <div
                  class="MuiTypography-root-id AppList-error-id MuiTypography-body2-id"
                >
                  Problem occured during installation
                  <button
                    class="TooltipMountWrapper-wrapper-id"
                  >
                    <span
                      class="Indicator-wrapper-id Indicator-wrapper-id"
                    >
                      <svg
                        class="Indicator-absolute-id"
                        fill="none"
                        viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <circle
                          class="Indicator-circlePath-id Indicator-circlePath-id"
                          cx="12"
                          cy="12"
                          r="12"
                        />
                      </svg>
                      <svg
                        class="Indicator-absolute-id"
                        fill="none"
                        viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 8 8 8m0-8-8 8"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Retry
                  </span>
                </button>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id AppList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AppList-colName-id"
              >
                <span
                  data-tc="name"
                >
                  app pending
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AppList-colAction-id AppList-colInstallAction-id"
              >
                <div
                  class="MuiTypography-root-id AppList-text-id MuiTypography-body2-id"
                >
                  Installing app...
                </div>
                <div
                  class="AppList-colSpinner-id"
                >
                  <div
                    class="MuiCircularProgress-root-id MuiCircularProgress-colorPrimary-id MuiCircularProgress-indeterminate-id"
                    role="progressbar"
                    style="width:20px;height:20px"
                  >
                    <svg
                      class="MuiCircularProgress-svg-id"
                      viewBox="22 22 44 44"
                    >
                      <circle
                        class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
                        cx="44"
                        cy="44"
                        fill="none"
                        r="20.2"
                        stroke-width="3.6"
                      />
                    </svg>
                  </div>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id AppList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AppList-colName-id"
              >
                <span
                  data-tc="name"
                >
                  app success
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Apps / Apps list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Apps
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id AppList-apps-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            Third Party Apps
          </span>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id AppList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AppList-colName-id"
                colspan="2"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
    <div
      class="MuiPaper-root-id MuiCard-root-id AppList-customApps-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            Internal Apps
          </span>
        </div>
        <div
          class="MuiCardHeader-action-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
            data-test-id="create-app"
            href="/apps/custom/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create App
            </span>
          </a>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id AppList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AppList-colName-id"
                colspan="2"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Apps / Apps list no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Apps
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id AppList-apps-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            Third Party Apps
          </span>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id AppList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AppList-colName-id"
              >
                <div
                  class="MuiTypography-root-id AppList-text-id MuiTypography-body2-id"
                >
                  You don’t have any installed apps in your dashboard
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
    <div
      class="MuiPaper-root-id MuiCard-root-id AppList-customApps-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            Internal Apps
          </span>
        </div>
        <div
          class="MuiCardHeader-action-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
            data-test-id="create-app"
            href="/apps/custom/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create App
            </span>
          </a>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id AppList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AppList-colName-id"
              >
                <div
                  class="MuiTypography-root-id AppList-text-id MuiTypography-body2-id"
                >
                  Your custom-created apps will be shown here.
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Apps / Custom app details / Token delete default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Views / Apps / Deactivate app default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Views / Apps / Deactivate app unnamed app 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Views / Apps / Delete app default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Views / Apps / Delete app failed installation default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Views / Apps / Delete app failed installation unnamed app 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Views / Apps / Delete app unnamed app 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Views / Apps / Install App default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="CardSpacer-spacer-id"
    />
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            You are about to install app
          </span>
        </div>
      </div>
      <div
        class="MuiCardContent-root-id AppList-installCard-id"
      >
        <div
          class="AppList-installAppContainer-id"
        >
          <div
            class="AppList-installIcon-id AppList-installSaleorIcon-id"
          >
            <img
              alt=""
              src="logo-dark-small.svg"
            />
          </div>
          <img
            alt=""
            src="plus-icon.svg"
          />
          <div
            class="AppList-installIcon-id"
          >
            <h2>
              A
            </h2>
          </div>
        </div>
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            App permissions
          </span>
        </div>
      </div>
      <div
        class="MuiCardContent-root-id"
      >
        <div
          class="MuiTypography-root-id AppList-installPermissionTitle-id MuiTypography-body1-id"
        >
          Installing this app will give it following permissions:
        </div>
        <ul
          class="AppList-permissionsContainer-id"
        >
          <li>
            Manage users
          </li>
          <li>
            Manage orders
          </li>
        </ul>
        <hr
          class="Hr-root-id AppList-installSpacer-id"
        />
        <div
          class="MuiTypography-root-id AppList-installPrivacyText-id MuiTypography-body2-id"
        >
          Uninstalling the app will remove all your customer’s personal data stored by app. 
          <a
            rel="noopener noreferrer"
            target="_blank"
          >
            Learn more about data privacy
          </a>
        </div>
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
    <div
      class="MuiGrid-root-id MuiGrid-container-id MuiGrid-justify-xs-space-between-id"
    >
      <div
        class="MuiGrid-root-id MuiGrid-item-id MuiGrid-grid-xs-6-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            Cancel
          </span>
        </button>
      </div>
      <div
        class="MuiGrid-root-id AppList-alignRight-id MuiGrid-item-id MuiGrid-grid-xs-6-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            Install App
          </span>
        </button>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Apps / Install App loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="CardSpacer-spacer-id"
    />
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
            >
              ‌
            </span>
          </span>
        </div>
      </div>
      <div
        class="MuiCardContent-root-id AppList-installCard-id"
      >
        <span
          class="Skeleton-skeleton-id"
          data-test-id="skeleton"
        >
          ‌
        </span>
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            App permissions
          </span>
        </div>
      </div>
      <div
        class="MuiCardContent-root-id"
      >
        <span
          class="Skeleton-skeleton-id"
          data-test-id="skeleton"
        >
          ‌
        </span>
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
    <div
      class="MuiGrid-root-id MuiGrid-container-id MuiGrid-justify-xs-space-between-id"
    >
      <div
        class="MuiGrid-root-id MuiGrid-item-id MuiGrid-grid-xs-6-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            Cancel
          </span>
        </button>
      </div>
      <div
        class="MuiGrid-root-id AppList-alignRight-id MuiGrid-item-id MuiGrid-grid-xs-6-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            Install App
          </span>
        </button>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Apps / Webhooks / Delete webhook default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Views / Apps / Webhooks / Delete webhook unnamed webhook 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Webhook Test 2 Details
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Webhook Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                General Information
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Webhook Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Webhook Test 2"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Webhook Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Target URL
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="targetUrl"
                    type="text"
                    value="http://www.getsaleor.com"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Target URL
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                >
                  This URL will receive webhook POST requests
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Secret Key
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    name="secretKey"
                    type="text"
                    value="zxczx_asdas"
                  />
                  <div>
                    <div
                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-outlined-id Pill-small-id MuiChip-sizeSmall-id"
                    >
                      <span
                        class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                      >
                        Deprecated
                      </span>
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Secret Key
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                >
                  secret key is used to create a hash signature with each payload. *optional field
                </p>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Webhook Status
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                If you want to disable this webhook please uncheck the box below.
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="isActive"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Webhook is active
                </span>
              </label>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Events
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Synchronous events
              </div>
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Assign permissions to register synchronous events for this webhook.
              </div>
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-53-label"
                class="MultiAutocompleteSelectField-container-id"
                data-test="syncEvents"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Registered events
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-53-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-53-menu"
                      role="listbox"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Registered events
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              />
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Asynchronous events
              </div>
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Assign permissions to register asynchronous events for this webhook.
              </div>
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-54-label"
                class="MultiAutocompleteSelectField-container-id"
                data-test="asyncEvents"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Registered events
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-54-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-54-menu"
                      role="listbox"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Registered events
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Webhook Test 2 Details
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Webhook Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                General Information
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Webhook Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Webhook Test 2"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Webhook Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Invalid value
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Target URL
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="targetUrl"
                    type="text"
                    value="http://www.getsaleor.com"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Target URL
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Invalid value
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Secret Key
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    name="secretKey"
                    type="text"
                    value="zxczx_asdas"
                  />
                  <div>
                    <div
                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-outlined-id Pill-small-id MuiChip-sizeSmall-id"
                    >
                      <span
                        class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                      >
                        Deprecated
                      </span>
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Secret Key
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Invalid value
                </p>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Webhook Status
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                If you want to disable this webhook please uncheck the box below.
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="isActive"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Webhook is active
                </span>
              </label>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Events
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Synchronous events
              </div>
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Assign permissions to register synchronous events for this webhook.
              </div>
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-61-label"
                class="MultiAutocompleteSelectField-container-id"
                data-test="syncEvents"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Registered events
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-61-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-61-menu"
                      role="listbox"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Registered events
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              />
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Asynchronous events
              </div>
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Assign permissions to register asynchronous events for this webhook.
              </div>
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-62-label"
                class="MultiAutocompleteSelectField-container-id"
                data-test="asyncEvents"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Registered events
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-62-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-62-menu"
                      role="listbox"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Registered events
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Create Webhook
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Webhook Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                General Information
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Webhook Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Webhook Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Target URL
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="targetUrl"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Target URL
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
                >
                  This URL will receive webhook POST requests
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Secret Key
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    disabled=""
                    name="secretKey"
                    type="text"
                    value=""
                  />
                  <div>
                    <div
                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-outlined-id Pill-small-id MuiChip-sizeSmall-id"
                    >
                      <span
                        class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                      >
                        Deprecated
                      </span>
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Secret Key
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
                >
                  secret key is used to create a hash signature with each payload. *optional field
                </p>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Webhook Status
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                If you want to disable this webhook please uncheck the box below.
              </div>
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      name="isActive"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Webhook is active
                </span>
              </label>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Events
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Synchronous events
              </div>
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Assign permissions to register synchronous events for this webhook.
              </div>
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-59-label"
                class="MultiAutocompleteSelectField-container-id"
                data-test="syncEvents"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Registered events
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-59-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-59-menu"
                      role="listbox"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Registered events
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              />
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Asynchronous events
              </div>
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Assign permissions to register asynchronous events for this webhook.
              </div>
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-60-label"
                class="MultiAutocompleteSelectField-container-id"
                data-test="asyncEvents"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Registered events
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-60-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-60-menu"
                      role="listbox"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Registered events
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Apps / Webhooks / Webhook details undefined 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Create Webhook
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Webhook Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                General Information
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Webhook Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Webhook Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Target URL
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="targetUrl"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Target URL
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                >
                  This URL will receive webhook POST requests
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Secret Key
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    name="secretKey"
                    type="text"
                    value=""
                  />
                  <div>
                    <div
                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-outlined-id Pill-small-id MuiChip-sizeSmall-id"
                    >
                      <span
                        class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                      >
                        Deprecated
                      </span>
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Secret Key
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                >
                  secret key is used to create a hash signature with each payload. *optional field
                </p>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Webhook Status
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                If you want to disable this webhook please uncheck the box below.
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="isActive"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Webhook is active
                </span>
              </label>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Events
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Synchronous events
              </div>
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Assign permissions to register synchronous events for this webhook.
              </div>
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-55-label"
                class="MultiAutocompleteSelectField-container-id"
                data-test="syncEvents"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Registered events
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-55-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-55-menu"
                      role="listbox"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Registered events
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              />
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Asynchronous events
              </div>
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Assign permissions to register asynchronous events for this webhook.
              </div>
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-56-label"
                class="MultiAutocompleteSelectField-container-id"
                data-test="asyncEvents"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Registered events
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-56-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-56-menu"
                      role="listbox"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Registered events
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Unnamed Webhook Details
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Webhook Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                General Information
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Webhook Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Webhook Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Target URL
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="targetUrl"
                    type="text"
                    value="http://www.getsaleor.com"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Target URL
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                >
                  This URL will receive webhook POST requests
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Secret Key
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    name="secretKey"
                    type="text"
                    value="zxczx_asdas"
                  />
                  <div>
                    <div
                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-outlined-id Pill-small-id MuiChip-sizeSmall-id"
                    >
                      <span
                        class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                      >
                        Deprecated
                      </span>
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Secret Key
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                >
                  secret key is used to create a hash signature with each payload. *optional field
                </p>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Webhook Status
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                If you want to disable this webhook please uncheck the box below.
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="isActive"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Webhook is active
                </span>
              </label>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Events
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Synchronous events
              </div>
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Assign permissions to register synchronous events for this webhook.
              </div>
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-57-label"
                class="MultiAutocompleteSelectField-container-id"
                data-test="syncEvents"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Registered events
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-57-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-57-menu"
                      role="listbox"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Registered events
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              />
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Asynchronous events
              </div>
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Assign permissions to register asynchronous events for this webhook.
              </div>
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-58-label"
                class="MultiAutocompleteSelectField-container-id"
                data-test="asyncEvents"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Registered events
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-58-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-58-menu"
                      role="listbox"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Registered events
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Create New Attribute
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Default Label
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Default Label
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Attribute Code
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="slug"
                    placeholder=""
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Attribute Code
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                >
                  This is used internally. Make sure you don’t use spaces
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AttributeDetails-inputTypeSection-id"
              >
                <div
                  class="MuiFormControl-root-id SingleSelectField-formControl-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Catalog Input type for Store Owner
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <div
                      aria-haspopup="listbox"
                      aria-labelledby="mui-component-select-inputType"
                      class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id"
                      id="mui-component-select-inputType"
                      role="button"
                      tabindex="0"
                    >
                      Dropdown
                    </div>
                    <input
                      aria-hidden="true"
                      class="MuiSelect-nativeInput-id"
                      name="inputType"
                      tabindex="-1"
                      value="DROPDOWN"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:143px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="valueRequired"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Value Required
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Attribute Values
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="assign-value-button"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign value
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnDrag-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnAdmin-id"
                      scope="col"
                    >
                      Admin
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnStore-id"
                      scope="col"
                    >
                      Default Store View
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-iconCell-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tfoot
                  class="MuiTableFooter-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id"
                      colspan="4"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                      >
                        <div
                          class="Pagination-spacer-id"
                        />
                        <div
                          class="Pagination-actions-id"
                        >
                          <button
                            aria-label="previous page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                              />
                            </svg>
                          </button>
                          <button
                            aria-label="next page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-next"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                              />
                            </svg>
                          </button>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tfoot>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id AttributeValues-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
                    >
                      john-doe
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
                    >
                      John Doe
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id AttributeValues-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
                    >
                      milionare-pirate
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
                    >
                      Milionare Pirate
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Organization
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id"
              >
                <label
                  class="RadioGroupField-formLabel-id"
                >
                  Attribute Class
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    Define where this attribute should be used in Saleor system
                  </div>
                </label>
                <div
                  aria-label="type"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="PRODUCT_TYPE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Product Attribute
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="PAGE_TYPE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Content Attribute
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Properties
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="filterableInStorefront"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Use as filter
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Position in faceted navigation
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="storefrontSearchPosition"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Position in faceted navigation
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id PrivateSwitchBase-checked-id MuiSwitch-checked-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        checked=""
                        class="PrivateSwitchBase-input-id MuiSwitch-input-id"
                        name="visibleInStorefront"
                        type="checkbox"
                      />
                      <span
                        class="MuiSwitch-thumb-id"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-track-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  <div>
                    Public
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      If enabled, attribute will be accessible to customers.
                    </div>
                    <div />
                  </div>
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Author
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Default Label
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Author"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Default Label
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Attribute Code
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="slug"
                    placeholder="author"
                    type="text"
                    value="author"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Attribute Code
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                >
                  This is used internally. Make sure you don’t use spaces
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AttributeDetails-inputTypeSection-id"
              >
                <div
                  class="MuiFormControl-root-id SingleSelectField-formControl-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Catalog Input type for Store Owner
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <div
                      aria-disabled="true"
                      aria-haspopup="listbox"
                      aria-labelledby="mui-component-select-inputType"
                      class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiSelect-disabled-id"
                      id="mui-component-select-inputType"
                      role="button"
                    >
                      Dropdown
                    </div>
                    <input
                      aria-hidden="true"
                      class="MuiSelect-nativeInput-id"
                      name="inputType"
                      tabindex="-1"
                      value="DROPDOWN"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id MuiSelect-disabled-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:143px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="valueRequired"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Value Required
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Attribute Values
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="assign-value-button"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign value
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnDrag-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnAdmin-id"
                      scope="col"
                    >
                      Admin
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnStore-id"
                      scope="col"
                    >
                      Default Store View
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-iconCell-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tfoot
                  class="MuiTableFooter-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id"
                      colspan="4"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                      >
                        <div
                          class="Pagination-spacer-id"
                        />
                        <div
                          class="Pagination-actions-id"
                        >
                          <button
                            aria-label="previous page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                              />
                            </svg>
                          </button>
                          <button
                            aria-label="next page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-next"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                              />
                            </svg>
                          </button>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tfoot>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id AttributeValues-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
                    >
                      john-doe
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
                    >
                      John Doe
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id AttributeValues-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
                    >
                      milionare-pirate
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
                    >
                      Milionare Pirate
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.id"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          100023123
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Organization
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id AttributeOrganization-label-id MuiTypography-caption-id"
              >
                Attribute Class
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Product Attribute
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Properties
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="filterableInStorefront"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Use as filter
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Position in faceted navigation
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="storefrontSearchPosition"
                    type="text"
                    value="2"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Position in faceted navigation
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id PrivateSwitchBase-checked-id MuiSwitch-checked-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        checked=""
                        class="PrivateSwitchBase-input-id MuiSwitch-input-id"
                        name="visibleInStorefront"
                        type="checkbox"
                      />
                      <span
                        class="MuiSwitch-thumb-id"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-track-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  <div>
                    Public
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      If enabled, attribute will be accessible to customers.
                    </div>
                    <div />
                  </div>
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Author
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Default Label
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Author"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Default Label
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Invalid value
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Attribute Code
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="slug"
                    placeholder="author"
                    type="text"
                    value="author"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Attribute Code
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Invalid value
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AttributeDetails-inputTypeSection-id"
              >
                <div
                  class="MuiFormControl-root-id SingleSelectField-formControl-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Catalog Input type for Store Owner
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <div
                      aria-disabled="true"
                      aria-haspopup="listbox"
                      aria-labelledby="mui-component-select-inputType"
                      class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiSelect-disabled-id"
                      id="mui-component-select-inputType"
                      role="button"
                    >
                      Dropdown
                    </div>
                    <input
                      aria-hidden="true"
                      class="MuiSelect-nativeInput-id"
                      name="inputType"
                      tabindex="-1"
                      value="DROPDOWN"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id MuiSelect-disabled-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:143px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="valueRequired"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Value Required
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Attribute Values
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="assign-value-button"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign value
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnDrag-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnAdmin-id"
                      scope="col"
                    >
                      Admin
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnStore-id"
                      scope="col"
                    >
                      Default Store View
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-iconCell-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tfoot
                  class="MuiTableFooter-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id"
                      colspan="4"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                      >
                        <div
                          class="Pagination-spacer-id"
                        />
                        <div
                          class="Pagination-actions-id"
                        >
                          <button
                            aria-label="previous page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                              />
                            </svg>
                          </button>
                          <button
                            aria-label="next page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-next"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                              />
                            </svg>
                          </button>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tfoot>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id AttributeValues-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
                    >
                      john-doe
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
                    >
                      John Doe
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id AttributeValues-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
                    >
                      milionare-pirate
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
                    >
                      Milionare Pirate
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.id"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          100023123
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Organization
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id AttributeOrganization-label-id MuiTypography-caption-id"
              >
                Attribute Class
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Product Attribute
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Properties
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="filterableInStorefront"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Use as filter
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Position in faceted navigation
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="storefrontSearchPosition"
                    type="text"
                    value="2"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Position in faceted navigation
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Invalid value
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id PrivateSwitchBase-checked-id MuiSwitch-checked-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        checked=""
                        class="PrivateSwitchBase-input-id MuiSwitch-input-id"
                        name="visibleInStorefront"
                        type="checkbox"
                      />
                      <span
                        class="MuiSwitch-thumb-id"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-track-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  <div>
                    Public
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      If enabled, attribute will be accessible to customers.
                    </div>
                    <div />
                  </div>
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
              style="width:10em"
            >
              ‌
            </span>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Default Label
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Default Label
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Attribute Code
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="slug"
                    placeholder=""
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Attribute Code
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
                >
                  This is used internally. Make sure you don’t use spaces
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AttributeDetails-inputTypeSection-id"
              >
                <div
                  class="MuiFormControl-root-id SingleSelectField-formControl-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Catalog Input type for Store Owner
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <div
                      aria-disabled="true"
                      aria-haspopup="listbox"
                      aria-labelledby="mui-component-select-inputType"
                      class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiSelect-disabled-id"
                      id="mui-component-select-inputType"
                      role="button"
                    >
                      Dropdown
                    </div>
                    <input
                      aria-hidden="true"
                      class="MuiSelect-nativeInput-id"
                      name="inputType"
                      tabindex="-1"
                      value="DROPDOWN"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id MuiSelect-disabled-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:143px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      name="valueRequired"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Value Required
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Attribute Values
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  data-test-id="assign-value-button"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign value
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnDrag-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnAdmin-id"
                      scope="col"
                    >
                      Admin
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnStore-id"
                      scope="col"
                    >
                      Default Store View
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-iconCell-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tfoot
                  class="MuiTableFooter-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id"
                      colspan="4"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                      >
                        <div
                          class="Pagination-spacer-id"
                        />
                        <div
                          class="Pagination-actions-id"
                        >
                          <button
                            aria-label="previous page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                              />
                            </svg>
                          </button>
                          <button
                            aria-label="next page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-next"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                              />
                            </svg>
                          </button>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tfoot>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Organization
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id AttributeOrganization-label-id MuiTypography-caption-id"
              >
                Attribute Class
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Product Attribute
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Properties
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      name="filterableInStorefront"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Use as filter
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Position in faceted navigation
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="storefrontSearchPosition"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Position in faceted navigation
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    aria-disabled="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id PrivateSwitchBase-checked-id MuiSwitch-checked-id PrivateSwitchBase-disabled-id MuiSwitch-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                    tabindex="-1"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        checked=""
                        class="PrivateSwitchBase-input-id MuiSwitch-input-id"
                        disabled=""
                        name="visibleInStorefront"
                        type="checkbox"
                      />
                      <span
                        class="MuiSwitch-thumb-id"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-track-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  <div>
                    Public
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      If enabled, attribute will be accessible to customers.
                    </div>
                    <div />
                  </div>
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Attributes / Attribute details multiple select input 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Author
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Default Label
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Author"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Default Label
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Attribute Code
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="slug"
                    placeholder="author"
                    type="text"
                    value="author"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Attribute Code
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                >
                  This is used internally. Make sure you don’t use spaces
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AttributeDetails-inputTypeSection-id"
              >
                <div
                  class="MuiFormControl-root-id SingleSelectField-formControl-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Catalog Input type for Store Owner
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <div
                      aria-disabled="true"
                      aria-haspopup="listbox"
                      aria-labelledby="mui-component-select-inputType"
                      class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiSelect-disabled-id"
                      id="mui-component-select-inputType"
                      role="button"
                    >
                      Multiple Select
                    </div>
                    <input
                      aria-hidden="true"
                      class="MuiSelect-nativeInput-id"
                      name="inputType"
                      tabindex="-1"
                      value="MULTISELECT"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id MuiSelect-disabled-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:143px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="valueRequired"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Value Required
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Attribute Values
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="assign-value-button"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign value
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnDrag-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnAdmin-id"
                      scope="col"
                    >
                      Admin
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnStore-id"
                      scope="col"
                    >
                      Default Store View
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-iconCell-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tfoot
                  class="MuiTableFooter-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id"
                      colspan="4"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                      >
                        <div
                          class="Pagination-spacer-id"
                        />
                        <div
                          class="Pagination-actions-id"
                        >
                          <button
                            aria-label="previous page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                              />
                            </svg>
                          </button>
                          <button
                            aria-label="next page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-next"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                              />
                            </svg>
                          </button>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tfoot>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id AttributeValues-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
                    >
                      john-doe
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
                    >
                      John Doe
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id AttributeValues-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
                    >
                      milionare-pirate
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
                    >
                      Milionare Pirate
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.id"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          100023123
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Organization
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id AttributeOrganization-label-id MuiTypography-caption-id"
              >
                Attribute Class
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Product Attribute
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Properties
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="filterableInStorefront"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Use as filter
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Position in faceted navigation
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="storefrontSearchPosition"
                    type="text"
                    value="2"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Position in faceted navigation
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id PrivateSwitchBase-checked-id MuiSwitch-checked-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        checked=""
                        class="PrivateSwitchBase-input-id MuiSwitch-input-id"
                        name="visibleInStorefront"
                        type="checkbox"
                      />
                      <span
                        class="MuiSwitch-thumb-id"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-track-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  <div>
                    Public
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      If enabled, attribute will be accessible to customers.
                    </div>
                    <div />
                  </div>
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Author
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Default Label
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Author"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Default Label
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Attribute Code
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="slug"
                    placeholder="author"
                    type="text"
                    value="author"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Attribute Code
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                >
                  This is used internally. Make sure you don’t use spaces
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AttributeDetails-inputTypeSection-id"
              >
                <div
                  class="MuiFormControl-root-id SingleSelectField-formControl-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Catalog Input type for Store Owner
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <div
                      aria-disabled="true"
                      aria-haspopup="listbox"
                      aria-labelledby="mui-component-select-inputType"
                      class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiSelect-disabled-id"
                      id="mui-component-select-inputType"
                      role="button"
                    >
                      Dropdown
                    </div>
                    <input
                      aria-hidden="true"
                      class="MuiSelect-nativeInput-id"
                      name="inputType"
                      tabindex="-1"
                      value="DROPDOWN"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id MuiSelect-disabled-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:143px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="valueRequired"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Value Required
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Attribute Values
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="assign-value-button"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign value
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnDrag-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnAdmin-id"
                      scope="col"
                    >
                      Admin
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnStore-id"
                      scope="col"
                    >
                      Default Store View
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-iconCell-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tfoot
                  class="MuiTableFooter-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id"
                      colspan="4"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                      >
                        <div
                          class="Pagination-spacer-id"
                        />
                        <div
                          class="Pagination-actions-id"
                        >
                          <button
                            aria-label="previous page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                              />
                            </svg>
                          </button>
                          <button
                            aria-label="next page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-next"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                              />
                            </svg>
                          </button>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tfoot>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.id"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          100023123
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Organization
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id AttributeOrganization-label-id MuiTypography-caption-id"
              >
                Attribute Class
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Product Attribute
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Properties
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="filterableInStorefront"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Use as filter
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Position in faceted navigation
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="storefrontSearchPosition"
                    type="text"
                    value="2"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Position in faceted navigation
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id PrivateSwitchBase-checked-id MuiSwitch-checked-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        checked=""
                        class="PrivateSwitchBase-input-id MuiSwitch-input-id"
                        name="visibleInStorefront"
                        type="checkbox"
                      />
                      <span
                        class="MuiSwitch-thumb-id"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-track-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  <div>
                    Public
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      If enabled, attribute will be accessible to customers.
                    </div>
                    <div />
                  </div>
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Attributes
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-attribute-button"
            href="/attributes/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create attribute
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Attributes
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Attribute"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <a
          class="TableRowLink-link-id"
          href="/attributes/UHJvZHVjdEF0dHJpYnV0ZTo5"
        />
        <a
          class="TableRowLink-link-id"
          href="/attributes/UHJvZHVjdEF0dHJpYnV0ZTo2"
        />
        <a
          class="TableRowLink-link-id"
          href="/attributes/UHJvZHVjdEF0dHJpYnV0ZToz"
        />
        <a
          class="TableRowLink-link-id"
          href="/attributes/UHJvZHVjdEF0dHJpYnV0ZTo4"
        />
        <a
          class="TableRowLink-link-id"
          href="/attributes/UHJvZHVjdEF0dHJpYnV0ZTo1"
        />
        <a
          class="TableRowLink-link-id"
          href="/attributes/UHJvZHVjdEF0dHJpYnV0ZToy"
        />
        <a
          class="TableRowLink-link-id"
          href="/attributes/UHJvZHVjdEF0dHJpYnV0ZTox"
        />
        <a
          class="TableRowLink-link-id"
          href="/attributes/UHJvZHVjdEF0dHJpYnV0ZToxMg%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/attributes/UHJvZHVjdEF0dHJpYnV0ZTo3"
        />
        <a
          class="TableRowLink-link-id"
          href="/attributes/UHJvZHVjdEF0dHJpYnV0ZToxMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/attributes/UHJvZHVjdEF0dHJpYnV0ZToxMA%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/attributes/UHJvZHVjdEF0dHJpYnV0ZTo0"
        />
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colSlug-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Attribute Code
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowLeft-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Default Label
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colVisible-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Visible
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colSearchable-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Searchable
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colFaceted-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Use as filter
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="6"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  />
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTo5"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                data-test-id="slug"
              >
                author
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-test-id="name"
              >
                Author
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-test-id="visible"
                data-test-visible="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-test-id="searchable"
                data-test-searchable="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-test-id="use-in-faceted-search"
                data-test-use-in-faceted-search="false"
              >
                No
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTo2"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                data-test-id="slug"
              >
                box-size
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-test-id="name"
              >
                Box Size
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-test-id="visible"
                data-test-visible="false"
              >
                No
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-test-id="searchable"
                data-test-searchable="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-test-id="use-in-faceted-search"
                data-test-use-in-faceted-search="false"
              >
                No
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZToz"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                data-test-id="slug"
              >
                brand
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-test-id="name"
              >
                Brand
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-test-id="visible"
                data-test-visible="false"
              >
                No
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-test-id="searchable"
                data-test-searchable="false"
              >
                No
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-test-id="use-in-faceted-search"
                data-test-use-in-faceted-search="true"
              >
                Yes
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTo4"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                data-test-id="slug"
              >
                candy-box-size
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-test-id="name"
              >
                Candy Box Size
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-test-id="visible"
                data-test-visible="false"
              >
                No
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-test-id="searchable"
                data-test-searchable="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-test-id="use-in-faceted-search"
                data-test-use-in-faceted-search="true"
              >
                Yes
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTo1"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                data-test-id="slug"
              >
                coffee-genre
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-test-id="name"
              >
                Coffee Genre
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-test-id="visible"
                data-test-visible="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-test-id="searchable"
                data-test-searchable="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-test-id="use-in-faceted-search"
                data-test-use-in-faceted-search="true"
              >
                Yes
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZToy"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                data-test-id="slug"
              >
                collar
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-test-id="name"
              >
                Collar
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-test-id="visible"
                data-test-visible="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-test-id="searchable"
                data-test-searchable="false"
              >
                No
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-test-id="use-in-faceted-search"
                data-test-use-in-faceted-search="true"
              >
                Yes
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTox"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                data-test-id="slug"
              >
                color
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-test-id="name"
              >
                Color
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-test-id="visible"
                data-test-visible="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-test-id="searchable"
                data-test-searchable="false"
              >
                No
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-test-id="use-in-faceted-search"
                data-test-use-in-faceted-search="false"
              >
                No
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZToxMg=="
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                data-test-id="slug"
              >
                cover
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-test-id="name"
              >
                Cover
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-test-id="visible"
                data-test-visible="false"
              >
                No
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-test-id="searchable"
                data-test-searchable="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-test-id="use-in-faceted-search"
                data-test-use-in-faceted-search="false"
              >
                No
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTo3"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                data-test-id="slug"
              >
                flavor
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-test-id="name"
              >
                Flavor
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-test-id="visible"
                data-test-visible="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-test-id="searchable"
                data-test-searchable="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-test-id="use-in-faceted-search"
                data-test-use-in-faceted-search="true"
              >
                Yes
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZToxMQ=="
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                data-test-id="slug"
              >
                language
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-test-id="name"
              >
                Language
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-test-id="visible"
                data-test-visible="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-test-id="searchable"
                data-test-searchable="false"
              >
                No
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-test-id="use-in-faceted-search"
                data-test-use-in-faceted-search="true"
              >
                Yes
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZToxMA=="
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                data-test-id="slug"
              >
                publisher
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-test-id="name"
              >
                Publisher
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-test-id="visible"
                data-test-visible="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-test-id="searchable"
                data-test-searchable="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-test-id="use-in-faceted-search"
                data-test-use-in-faceted-search="true"
              >
                Yes
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTo0"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                data-test-id="slug"
              >
                size
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-test-id="name"
              >
                Size
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-test-id="visible"
                data-test-visible="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-test-id="searchable"
                data-test-searchable="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-test-id="use-in-faceted-search"
                data-test-use-in-faceted-search="true"
              >
                Yes
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Attributes / Attribute list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Attributes
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-attribute-button"
            href="/attributes/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create attribute
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Attributes
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Attribute"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colSlug-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Attribute Code
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowLeft-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Default Label
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colVisible-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Visible
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colSearchable-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Searchable
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colFaceted-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Use as filter
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="6"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  />
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id AttributeList-link-id"
              data-test-id="id-undefined"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                data-test-id="slug"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-test-id="name"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-test-id="visible"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-test-id="searchable"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-test-id="use-in-faceted-search"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Attributes / Attribute list no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Attributes
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-attribute-button"
            href="/attributes/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create attribute
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Attributes
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Attribute"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colSlug-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Attribute Code
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowLeft-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Default Label
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colVisible-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Visible
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colSearchable-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Searchable
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colFaceted-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Use as filter
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="6"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  />
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
                colspan="6"
              >
                No attributes found
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Authentication / Log in default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          class="MuiTypography-root-id Login-header-id MuiTypography-h3-id"
        >
          Sign In
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
            data-shrink="false"
          >
            Email address
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              autocomplete="username"
              autofocus=""
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              data-test-id="email"
              name="email"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id"
              >
                <span>
                  Email address
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="Login-passwordWrapper-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
              data-shrink="false"
            >
              Password
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                autocomplete="password"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                data-test-id="password"
                name="password"
                type="password"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id"
                >
                  <span>
                    Password
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
          <button
            class="MuiButtonBase-root-id IconButton-secondary-id Login-showPasswordBtn-id"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id"
              fill="none"
              focusable="false"
              height="25"
              viewBox="0 0 24 25"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                clip-rule="evenodd"
                d="M3.818 12.086a1.16 1.16 0 0 1-.048-.084c.011-.021.027-.05.048-.084.083-.133.222-.31.424-.52.403-.417 1.008-.91 1.776-1.382.576-.355 1.232-.69 1.951-.973A4.978 4.978 0 0 0 7 12.002c0 1.107.36 2.13.969 2.959a12.35 12.35 0 0 1-1.95-.973c-.769-.472-1.374-.965-1.777-1.382a3.307 3.307 0 0 1-.424-.52Zm12.213 2.875a12.35 12.35 0 0 0 1.95-.973c.769-.472 1.374-.965 1.777-1.382.202-.21.34-.387.424-.52l.048-.084a1.164 1.164 0 0 0-.048-.084 3.302 3.302 0 0 0-.424-.52c-.403-.417-1.008-.91-1.776-1.382a12.347 12.347 0 0 0-1.951-.973c.61.829.969 1.852.969 2.959s-.36 2.13-.969 2.959ZM12 6.75c-2.67 0-5.056.933-6.768 1.987-.857.528-1.565 1.097-2.068 1.618-.25.259-.464.52-.62.77-.14.225-.294.537-.294.876 0 .34.154.651.295.877.155.25.368.51.619.77.503.52 1.21 1.09 2.068 1.617C6.944 16.32 9.329 17.252 12 17.252c2.67 0 5.056-.932 6.768-1.986.857-.528 1.565-1.097 2.068-1.618.25-.26.464-.52.62-.77.14-.225.294-.537.294-.876 0-.34-.154-.651-.295-.877a4.769 4.769 0 0 0-.619-.77c-.503-.52-1.21-1.09-2.068-1.617C17.056 7.684 14.671 6.752 12 6.752Zm3.5 5.251a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
          </button>
        </div>
        <a
          class="MuiTypography-root-id Login-link-id MuiTypography-body2-id"
          data-test-id="reset-password-link"
          href="/reset-password/"
        >
          Forgot password?
        </a>
        <div
          class="Login-buttonContainer-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-loginButton-id MuiButton-containedPrimary-id"
            data-test-id="submit"
            tabindex="0"
            type="submit"
          >
            <span
              class="MuiButton-label-id"
            >
              Sign in
            </span>
          </button>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <hr
          class="MuiDivider-root-id"
        />
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          or login using
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-fullWidth-id"
          data-test-id="external-authentication"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            Example auth plugin
          </span>
        </button>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Authentication / Log in disabled 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          class="MuiTypography-root-id Login-header-id MuiTypography-h3-id"
        >
          Sign In
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
            data-shrink="false"
          >
            Email address
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              autocomplete="username"
              autofocus=""
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
              data-test-id="email"
              disabled=""
              name="email"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id"
              >
                <span>
                  Email address
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="Login-passwordWrapper-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
              data-shrink="false"
            >
              Password
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                autocomplete="password"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                data-test-id="password"
                disabled=""
                name="password"
                type="password"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id"
                >
                  <span>
                    Password
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
          <button
            class="MuiButtonBase-root-id IconButton-secondary-id Login-showPasswordBtn-id"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id"
              fill="none"
              focusable="false"
              height="25"
              viewBox="0 0 24 25"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                clip-rule="evenodd"
                d="M3.818 12.086a1.16 1.16 0 0 1-.048-.084c.011-.021.027-.05.048-.084.083-.133.222-.31.424-.52.403-.417 1.008-.91 1.776-1.382.576-.355 1.232-.69 1.951-.973A4.978 4.978 0 0 0 7 12.002c0 1.107.36 2.13.969 2.959a12.35 12.35 0 0 1-1.95-.973c-.769-.472-1.374-.965-1.777-1.382a3.307 3.307 0 0 1-.424-.52Zm12.213 2.875a12.35 12.35 0 0 0 1.95-.973c.769-.472 1.374-.965 1.777-1.382.202-.21.34-.387.424-.52l.048-.084a1.164 1.164 0 0 0-.048-.084 3.302 3.302 0 0 0-.424-.52c-.403-.417-1.008-.91-1.776-1.382a12.347 12.347 0 0 0-1.951-.973c.61.829.969 1.852.969 2.959s-.36 2.13-.969 2.959ZM12 6.75c-2.67 0-5.056.933-6.768 1.987-.857.528-1.565 1.097-2.068 1.618-.25.259-.464.52-.62.77-.14.225-.294.537-.294.876 0 .34.154.651.295.877.155.25.368.51.619.77.503.52 1.21 1.09 2.068 1.617C6.944 16.32 9.329 17.252 12 17.252c2.67 0 5.056-.932 6.768-1.986.857-.528 1.565-1.097 2.068-1.618.25-.26.464-.52.62-.77.14-.225.294-.537.294-.876 0-.34-.154-.651-.295-.877a4.769 4.769 0 0 0-.619-.77c-.503-.52-1.21-1.09-2.068-1.617C17.056 7.684 14.671 6.752 12 6.752Zm3.5 5.251a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
          </button>
        </div>
        <a
          class="MuiTypography-root-id Login-link-id MuiTypography-body2-id"
          data-test-id="reset-password-link"
          href="/reset-password/"
        >
          Forgot password?
        </a>
        <div
          class="Login-buttonContainer-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-loginButton-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
            data-test-id="submit"
            disabled=""
            tabindex="-1"
            type="submit"
          >
            <span
              class="MuiButton-label-id"
            >
              Sign in
            </span>
          </button>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <hr
          class="MuiDivider-root-id"
        />
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          or login using
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-disabled-id MuiButton-fullWidth-id MuiButtonBase-disabled-id"
          data-test-id="external-authentication"
          disabled=""
          tabindex="-1"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            Example auth plugin
          </span>
        </button>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Authentication / Log in error external login 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          class="MuiTypography-root-id Login-header-id MuiTypography-h3-id"
        >
          Sign In
        </div>
        <div
          class="Login-panel-id"
          data-test-id="login-error-message"
        >
          Sorry, login went wrong. Please try again.
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
            data-shrink="false"
          >
            Email address
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              autocomplete="username"
              autofocus=""
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              data-test-id="email"
              name="email"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id"
              >
                <span>
                  Email address
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="Login-passwordWrapper-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
              data-shrink="false"
            >
              Password
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                autocomplete="password"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                data-test-id="password"
                name="password"
                type="password"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id"
                >
                  <span>
                    Password
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
          <button
            class="MuiButtonBase-root-id IconButton-secondary-id Login-showPasswordBtn-id"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id"
              fill="none"
              focusable="false"
              height="25"
              viewBox="0 0 24 25"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                clip-rule="evenodd"
                d="M3.818 12.086a1.16 1.16 0 0 1-.048-.084c.011-.021.027-.05.048-.084.083-.133.222-.31.424-.52.403-.417 1.008-.91 1.776-1.382.576-.355 1.232-.69 1.951-.973A4.978 4.978 0 0 0 7 12.002c0 1.107.36 2.13.969 2.959a12.35 12.35 0 0 1-1.95-.973c-.769-.472-1.374-.965-1.777-1.382a3.307 3.307 0 0 1-.424-.52Zm12.213 2.875a12.35 12.35 0 0 0 1.95-.973c.769-.472 1.374-.965 1.777-1.382.202-.21.34-.387.424-.52l.048-.084a1.164 1.164 0 0 0-.048-.084 3.302 3.302 0 0 0-.424-.52c-.403-.417-1.008-.91-1.776-1.382a12.347 12.347 0 0 0-1.951-.973c.61.829.969 1.852.969 2.959s-.36 2.13-.969 2.959ZM12 6.75c-2.67 0-5.056.933-6.768 1.987-.857.528-1.565 1.097-2.068 1.618-.25.259-.464.52-.62.77-.14.225-.294.537-.294.876 0 .34.154.651.295.877.155.25.368.51.619.77.503.52 1.21 1.09 2.068 1.617C6.944 16.32 9.329 17.252 12 17.252c2.67 0 5.056-.932 6.768-1.986.857-.528 1.565-1.097 2.068-1.618.25-.26.464-.52.62-.77.14-.225.294-.537.294-.876 0-.34-.154-.651-.295-.877a4.769 4.769 0 0 0-.619-.77c-.503-.52-1.21-1.09-2.068-1.617C17.056 7.684 14.671 6.752 12 6.752Zm3.5 5.251a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
          </button>
        </div>
        <a
          class="MuiTypography-root-id Login-link-id MuiTypography-body2-id"
          data-test-id="reset-password-link"
          href="/reset-password/"
        >
          Forgot password?
        </a>
        <div
          class="Login-buttonContainer-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-loginButton-id MuiButton-containedPrimary-id"
            data-test-id="submit"
            tabindex="0"
            type="submit"
          >
            <span
              class="MuiButton-label-id"
            >
              Sign in
            </span>
          </button>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <hr
          class="MuiDivider-root-id"
        />
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          or login using
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-fullWidth-id"
          data-test-id="external-authentication"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            Example auth plugin
          </span>
        </button>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Authentication / Log in error login 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          class="MuiTypography-root-id Login-header-id MuiTypography-h3-id"
        >
          Sign In
        </div>
        <div
          class="Login-panel-id"
          data-test-id="login-error-message"
        >
          Sorry, your username and/or password are incorrect. Please try again.
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
            data-shrink="false"
          >
            Email address
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              autocomplete="username"
              autofocus=""
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              data-test-id="email"
              name="email"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id"
              >
                <span>
                  Email address
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="Login-passwordWrapper-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
              data-shrink="false"
            >
              Password
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                autocomplete="password"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                data-test-id="password"
                name="password"
                type="password"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id"
                >
                  <span>
                    Password
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
          <button
            class="MuiButtonBase-root-id IconButton-secondary-id Login-showPasswordBtn-id"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id"
              fill="none"
              focusable="false"
              height="25"
              viewBox="0 0 24 25"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                clip-rule="evenodd"
                d="M3.818 12.086a1.16 1.16 0 0 1-.048-.084c.011-.021.027-.05.048-.084.083-.133.222-.31.424-.52.403-.417 1.008-.91 1.776-1.382.576-.355 1.232-.69 1.951-.973A4.978 4.978 0 0 0 7 12.002c0 1.107.36 2.13.969 2.959a12.35 12.35 0 0 1-1.95-.973c-.769-.472-1.374-.965-1.777-1.382a3.307 3.307 0 0 1-.424-.52Zm12.213 2.875a12.35 12.35 0 0 0 1.95-.973c.769-.472 1.374-.965 1.777-1.382.202-.21.34-.387.424-.52l.048-.084a1.164 1.164 0 0 0-.048-.084 3.302 3.302 0 0 0-.424-.52c-.403-.417-1.008-.91-1.776-1.382a12.347 12.347 0 0 0-1.951-.973c.61.829.969 1.852.969 2.959s-.36 2.13-.969 2.959ZM12 6.75c-2.67 0-5.056.933-6.768 1.987-.857.528-1.565 1.097-2.068 1.618-.25.259-.464.52-.62.77-.14.225-.294.537-.294.876 0 .34.154.651.295.877.155.25.368.51.619.77.503.52 1.21 1.09 2.068 1.617C6.944 16.32 9.329 17.252 12 17.252c2.67 0 5.056-.932 6.768-1.986.857-.528 1.565-1.097 2.068-1.618.25-.26.464-.52.62-.77.14-.225.294-.537.294-.876 0-.34-.154-.651-.295-.877a4.769 4.769 0 0 0-.619-.77c-.503-.52-1.21-1.09-2.068-1.617C17.056 7.684 14.671 6.752 12 6.752Zm3.5 5.251a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
          </button>
        </div>
        <a
          class="MuiTypography-root-id Login-link-id MuiTypography-body2-id"
          data-test-id="reset-password-link"
          href="/reset-password/"
        >
          Forgot password?
        </a>
        <div
          class="Login-buttonContainer-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-loginButton-id MuiButton-containedPrimary-id"
            data-test-id="submit"
            tabindex="0"
            type="submit"
          >
            <span
              class="MuiButton-label-id"
            >
              Sign in
            </span>
          </button>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <hr
          class="MuiDivider-root-id"
        />
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          or login using
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-fullWidth-id"
          data-test-id="external-authentication"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            Example auth plugin
          </span>
        </button>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Authentication / Log in loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="Login-loading-id"
      >
        <div
          class="MuiCircularProgress-root-id MuiCircularProgress-colorPrimary-id MuiCircularProgress-indeterminate-id"
          role="progressbar"
          style="width:128px;height:128px"
        >
          <svg
            class="MuiCircularProgress-svg-id"
            viewBox="22 22 44 44"
          >
            <circle
              class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
              cx="44"
              cy="44"
              fill="none"
              r="20.2"
              stroke-width="3.6"
            />
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Authentication / Reset password default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <a
          aria-disabled="false"
          class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id Login-backBtn-id"
          href="/"
          role="button"
          tabindex="0"
        >
          <span
            class="MuiIconButton-label-id"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id Login-arrow-id"
              fill="none"
              focusable="false"
              height="25"
              viewBox="0 0 24 25"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M4 12h15.5m0 0-5-5m5 5-5 5"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.5"
              />
            </svg>
          </span>
        </a>
        <div
          class="MuiTypography-root-id Login-header-id MuiTypography-h3-id"
        >
          Reset password
        </div>
        <div
          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
        >
          Provide us with an email - if we find it in our database we will send you a link to reset your password. You should be able to find it in your inbox in the next couple of minutes.
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
            data-shrink="false"
          >
            Email address
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              autocomplete="username"
              autofocus=""
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              data-test-id="email"
              name="email"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id"
              >
                <span>
                  Email address
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-submit-id MuiButton-containedPrimary-id"
          data-test-id="submit"
          tabindex="0"
          type="submit"
        >
          <span
            class="MuiButton-label-id"
          >
            Send an email with reset link
          </span>
        </button>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Authentication / Reset password error 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <a
          aria-disabled="false"
          class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id Login-backBtn-id"
          href="/"
          role="button"
          tabindex="0"
        >
          <span
            class="MuiIconButton-label-id"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id Login-arrow-id"
              fill="none"
              focusable="false"
              height="25"
              viewBox="0 0 24 25"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M4 12h15.5m0 0-5-5m5 5-5 5"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.5"
              />
            </svg>
          </span>
        </a>
        <div
          class="MuiTypography-root-id Login-header-id MuiTypography-h3-id"
        >
          Reset password
        </div>
        <div
          class="Login-panel-id"
        >
          Generic form error
        </div>
        <div
          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
        >
          Provide us with an email - if we find it in our database we will send you a link to reset your password. You should be able to find it in your inbox in the next couple of minutes.
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
            data-shrink="false"
          >
            Email address
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              autocomplete="username"
              autofocus=""
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              data-test-id="email"
              name="email"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id"
              >
                <span>
                  Email address
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-submit-id MuiButton-containedPrimary-id"
          data-test-id="submit"
          tabindex="0"
          type="submit"
        >
          <span
            class="MuiButton-label-id"
          >
            Send an email with reset link
          </span>
        </button>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Authentication / Reset password loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <a
          aria-disabled="false"
          class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id Login-backBtn-id"
          href="/"
          role="button"
          tabindex="0"
        >
          <span
            class="MuiIconButton-label-id"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id Login-arrow-id"
              fill="none"
              focusable="false"
              height="25"
              viewBox="0 0 24 25"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M4 12h15.5m0 0-5-5m5 5-5 5"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.5"
              />
            </svg>
          </span>
        </a>
        <div
          class="MuiTypography-root-id Login-header-id MuiTypography-h3-id"
        >
          Reset password
        </div>
        <div
          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
        >
          Provide us with an email - if we find it in our database we will send you a link to reset your password. You should be able to find it in your inbox in the next couple of minutes.
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
            data-shrink="false"
          >
            Email address
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              autocomplete="username"
              autofocus=""
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
              data-test-id="email"
              disabled=""
              name="email"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id"
              >
                <span>
                  Email address
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-submit-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
          data-test-id="submit"
          disabled=""
          tabindex="-1"
          type="submit"
        >
          <span
            class="MuiButton-label-id"
          >
            Send an email with reset link
          </span>
        </button>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Authentication / Reset password success default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiTypography-root-id Login-header-id MuiTypography-h3-id"
      >
        Reset password
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        Success! In a few minutes you’ll receive a message with instructions on how to reset your password.
      </div>
      <div
        class="FormSpacer-spacer-id"
      />
      <button
        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-submit-id MuiButton-containedPrimary-id"
        tabindex="0"
        type="submit"
      >
        <span
          class="MuiButton-label-id"
        >
          Back to login
        </span>
      </button>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Authentication / Set up a new password default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          class="MuiTypography-root-id Login-header-id MuiTypography-h3-id"
        >
          Set up new password
        </div>
        <div
          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
        >
          Please set up a new password for your account. Repeat your new password to make sure you will be able to remember it.
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
            data-shrink="false"
          >
            New Password
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              autocomplete="none"
              autofocus=""
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              data-test-id="password"
              name="password"
              type="password"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id"
              >
                <span>
                  New Password
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
            data-shrink="false"
          >
            Confirm Password
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              autocomplete="none"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              data-test-id="confirm-password"
              name="confirmPassword"
              type="password"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id"
              >
                <span>
                  Confirm Password
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-submit-id MuiButton-containedPrimary-id"
          data-test="button-bar-confirm"
          tabindex="0"
          type="submit"
        >
          <span
            class="MuiButton-label-id"
          >
            Set new password
          </span>
        </button>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Authentication / Set up a new password loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          class="MuiTypography-root-id Login-header-id MuiTypography-h3-id"
        >
          Set up new password
        </div>
        <div
          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
        >
          Please set up a new password for your account. Repeat your new password to make sure you will be able to remember it.
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
            data-shrink="false"
          >
            New Password
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              autocomplete="none"
              autofocus=""
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
              data-test-id="password"
              disabled=""
              name="password"
              type="password"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id"
              >
                <span>
                  New Password
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
            data-shrink="false"
          >
            Confirm Password
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              autocomplete="none"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
              data-test-id="confirm-password"
              disabled=""
              name="confirmPassword"
              type="password"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id"
              >
                <span>
                  Confirm Password
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-submit-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
          data-test="button-bar-confirm"
          disabled=""
          tabindex="-1"
          type="submit"
        >
          <span
            class="MuiButton-label-id"
          >
            Set new password
          </span>
        </button>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Authentication / Set up a new password too short error 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          class="MuiTypography-root-id Login-header-id MuiTypography-h3-id"
        >
          Set up new password
        </div>
        <div
          class="Login-panel-id"
        >
          This password is too short
        </div>
        <div
          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
        >
          Please set up a new password for your account. Repeat your new password to make sure you will be able to remember it.
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
            data-shrink="false"
          >
            New Password
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              autocomplete="none"
              autofocus=""
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              data-test-id="password"
              name="password"
              type="password"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id"
              >
                <span>
                  New Password
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
            data-shrink="false"
          >
            Confirm Password
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              autocomplete="none"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              data-test-id="confirm-password"
              name="confirmPassword"
              type="password"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id"
              >
                <span>
                  Confirm Password
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-submit-id MuiButton-containedPrimary-id"
          data-test="button-bar-confirm"
          tabindex="0"
          type="submit"
        >
          <span
            class="MuiButton-label-id"
          >
            Set new password
          </span>
        </button>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Authentication / Verifying remembered user default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="LoginLoading-root-id"
  >
    <div
      class="MuiCircularProgress-root-id MuiCircularProgress-colorPrimary-id MuiCircularProgress-indeterminate-id"
      role="progressbar"
      style="width:128px;height:128px"
    >
      <svg
        class="MuiCircularProgress-svg-id"
        viewBox="22 22 44 44"
      >
        <circle
          class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
          cx="44"
          cy="44"
          fill="none"
          r="20.2"
          stroke-width="3.6"
        />
      </svg>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Categories / Category list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Categories
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-category"
            href="/categories/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create category
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Categories
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="SearchBar-root-id"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Category"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <a
          class="TableRowLink-link-id"
          href="/categories/123123"
        />
        <a
          class="TableRowLink-link-id"
          href="/categories/876752"
        />
        <a
          class="TableRowLink-link-id"
          href="/categories/876542"
        />
        <a
          class="TableRowLink-link-id"
          href="/categories/875352"
        />
        <a
          class="TableRowLink-link-id"
          href="/categories/865752"
        />
        <a
          class="TableRowLink-link-id"
          href="/categories/878752"
        />
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Category Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colSubcategories-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Subcategories
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colProducts-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Products
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
              data-test-id="id-123123"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
                data-test-id="name"
              >
                Lorem ipsum dolor
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
              >
                2
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
              >
                4
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
              data-test-id="id-876752"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
                data-test-id="name"
              >
                Mauris vehicula tortor vulputate
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
              >
                54
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
              >
                3
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
              data-test-id="id-876542"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
                data-test-id="name"
              >
                Excepteur sint occaecat cupidatat non proident
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
              >
                2
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
              >
                6
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
              data-test-id="id-875352"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
                data-test-id="name"
              >
                Ut enim ad minim veniam
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
              >
                6
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
              >
                12
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
              data-test-id="id-865752"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
                data-test-id="name"
              >
                Duis aute irure dolor in reprehenderit
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
              >
                76
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
              >
                43
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
              data-test-id="id-878752"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
                data-test-id="name"
              >
                Neque porro quisquam est
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
              >
                11
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
              >
                21
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Categories / Category list empty 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Categories
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-category"
            href="/categories/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create category
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Categories
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="SearchBar-root-id"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Category"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Category Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colSubcategories-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Subcategories
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colProducts-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Products
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="3"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
                colspan="3"
              >
                No categories found
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Categories / Category list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Categories
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-category"
            href="/categories/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create category
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Categories
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="SearchBar-root-id"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Category"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Category Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colSubcategories-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Subcategories
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colProducts-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Products
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id CategoryList-tableRow-id"
              data-test-id="id-undefined"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
                data-test-id="name"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Categories / Create category When loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Create New Category
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                General Information
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Category Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Category Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              data-test-id="rich-text-editor-description"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                data-shrink="true"
              >
                Category Description
              </label>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
              />
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Search Engine Preview
              </span>
            </div>
            <div
              class="MuiCardHeader-action-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                data-test-id="edit-seo"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Edit website SEO
                </span>
              </button>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Add search engine title and description to make this category easier to find
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="false"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="true"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Private Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Categories / Create category default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Create New Category
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                General Information
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Category Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Category Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              data-test-id="rich-text-editor-description"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                data-shrink="true"
              >
                Category Description
              </label>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
              />
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Search Engine Preview
              </span>
            </div>
            <div
              class="MuiCardHeader-action-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                data-test-id="edit-seo"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Edit website SEO
                </span>
              </button>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Add search engine title and description to make this category easier to find
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="false"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="true"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Private Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Categories / Create category form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Create New Category
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                General Information
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                  data-shrink="false"
                >
                  Category Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Category Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  This field is required
                </p>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              data-test-id="rich-text-editor-description"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                data-shrink="true"
              >
                Category Description
              </label>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
              >
                This field is required
              </p>
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Search Engine Preview
              </span>
            </div>
            <div
              class="MuiCardHeader-action-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                data-test-id="edit-seo"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Edit website SEO
                </span>
              </button>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Add search engine title and description to make this category easier to find
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="false"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="true"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Private Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Categories / Update category default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Coffees
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              General Information
            </span>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
        >
          <div>
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Category Name
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="name"
                  type="text"
                  value="Coffees"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                  >
                    <span>
                      Category Name
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
            data-test-id="rich-text-editor-description"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
              data-shrink="true"
            >
              Category Description
            </label>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
            />
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Background Image (optional)
            </span>
          </div>
          <div
            class="MuiCardHeader-action-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Upload image
              </span>
            </button>
            <input
              accept="image/*"
              class="CategoryBackground-fileField-id"
              id="fileUpload"
              type="file"
            />
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MediaTile-mediaContainer-id"
            data-test-id="product-image"
          >
            <div
              class="MediaTile-mediaOverlay-id"
            >
              <div
                class="MediaTile-mediaOverlayToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </div>
            </div>
            <img
              alt="Alt text"
              class="MediaTile-media-id"
              src="placeholder255x255.png"
            />
          </div>
        </div>
        <hr
          class="Hr-root-id"
        />
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
              data-shrink="true"
            >
              Description
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
            >
              <textarea
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                name="backgroundImageAlt"
                rows="1"
              >
                Alt text
              </textarea>
              <textarea
                aria-hidden="true"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                readonly=""
                style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                tabindex="-1"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                >
                  <span>
                    Description
                  </span>
                </legend>
              </fieldset>
            </div>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
            >
              (Optional)
            </p>
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Search Engine Preview
            </span>
          </div>
          <div
            class="MuiCardHeader-action-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
              data-test-id="edit-seo"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Edit website SEO
              </span>
            </button>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Add search engine title and description to make this category easier to find
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        data-test-expanded="true"
        data-test-id="metadata-editor"
        data-test-is-private="false"
      >
        <div
          class="MuiCardHeader-root-id Metadata-header-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Metadata
              <button
                class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                data-test-id="expand"
                tabindex="0"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="24"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m8 10.5 4 4 4-4"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="1.5"
                  />
                  <circle
                    cx="12"
                    cy="12"
                    r="10.25"
                    stroke="currentColor"
                    stroke-width="1.5"
                  />
                </svg>
              </button>
            </span>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id Metadata-content-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
          >
            1 string
          </div>
        </div>
        <table
          class="MuiTable-root-id Metadata-table-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                scope="col"
              >
                Field
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                scope="col"
              >
                Value
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                scope="col"
              >
                Actions
              </th>
            </tr>
          </thead>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id"
              data-test-id="field"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                      name="name:0"
                      type="text"
                      value="integration.id"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                  >
                    <textarea
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                      name="value:0"
                      rows="1"
                    >
                      100023123
                    </textarea>
                    <textarea
                      aria-hidden="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                      readonly=""
                      style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                      tabindex="-1"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  data-test-id="delete-field-0"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
        <div
          class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
            data-test-id="add-field"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add Field
            </span>
          </button>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        data-test-expanded="true"
        data-test-id="metadata-editor"
        data-test-is-private="true"
      >
        <div
          class="MuiCardHeader-root-id Metadata-header-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Private Metadata
              <button
                class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                data-test-id="expand"
                tabindex="0"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="24"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m8 10.5 4 4 4-4"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="1.5"
                  />
                  <circle
                    cx="12"
                    cy="12"
                    r="10.25"
                    stroke="currentColor"
                    stroke-width="1.5"
                  />
                </svg>
              </button>
            </span>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id Metadata-content-id"
        />
        <div
          class="MuiCardContent-root-id Metadata-emptyContainer-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
          >
            No metadata created for this element. Use the button below to add new metadata field.
          </div>
        </div>
        <div
          class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
            data-test-id="add-field"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add Field
            </span>
          </button>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="TabContainer-root-id"
      >
        <span
          class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
        >
          Subcategories
        </span>
        <span
          class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
          data-test-id="products-tab"
        >
          Products
        </span>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              All Subcategories
            </span>
          </div>
          <div
            class="MuiCardHeader-action-id"
          >
            <a
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
              data-test-id="create-subcategory"
              href="/categories/123/add"
              role="button"
              tabindex="0"
            >
              <span
                class="MuiButton-label-id"
              >
                Create subcategory
              </span>
            </a>
          </div>
        </div>
        <div
          class="ResponsiveTable-root-id"
        >
          <table
            class="MuiTable-root-id"
          >
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colName-id TableCellHeader-disabled-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Category Name
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colSubcategories-id TableCellHeader-disabled-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Subcategories
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colProducts-id TableCellHeader-disabled-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      No. of Products
                    </div>
                  </div>
                </th>
              </tr>
            </thead>
            <tfoot
              class="MuiTableFooter-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id"
                  colspan="3"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                  >
                    <div
                      class="Pagination-spacer-id"
                    />
                    <div
                      class="Pagination-actions-id"
                    >
                      <button
                        aria-label="previous page"
                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-back"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                          />
                        </svg>
                      </button>
                      <button
                        aria-label="next page"
                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-next"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                </td>
              </tr>
            </tfoot>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id"
                  colspan="3"
                >
                  No subcategories found
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Categories / Update category form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Coffees
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              General Information
            </span>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
        >
          <div>
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Category Name
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="true"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="name"
                  type="text"
                  value="Coffees"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                  >
                    <span>
                      Category Name
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
              >
                This field is required
              </p>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
            data-test-id="rich-text-editor-description"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
              data-shrink="true"
            >
              Category Description
            </label>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
            >
              This field is required
            </p>
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Background Image (optional)
            </span>
          </div>
          <div
            class="MuiCardHeader-action-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Upload image
              </span>
            </button>
            <input
              accept="image/*"
              class="CategoryBackground-fileField-id"
              id="fileUpload"
              type="file"
            />
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MediaTile-mediaContainer-id"
            data-test-id="product-image"
          >
            <div
              class="MediaTile-mediaOverlay-id"
            >
              <div
                class="MediaTile-mediaOverlayToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </div>
            </div>
            <img
              alt="Alt text"
              class="MediaTile-media-id"
              src="placeholder255x255.png"
            />
          </div>
        </div>
        <hr
          class="Hr-root-id"
        />
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
              data-shrink="true"
            >
              Description
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
            >
              <textarea
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                name="backgroundImageAlt"
                rows="1"
              >
                Alt text
              </textarea>
              <textarea
                aria-hidden="true"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                readonly=""
                style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                tabindex="-1"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                >
                  <span>
                    Description
                  </span>
                </legend>
              </fieldset>
            </div>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
            >
              (Optional)
            </p>
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Search Engine Preview
            </span>
          </div>
          <div
            class="MuiCardHeader-action-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
              data-test-id="edit-seo"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Edit website SEO
              </span>
            </button>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Add search engine title and description to make this category easier to find
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        data-test-expanded="true"
        data-test-id="metadata-editor"
        data-test-is-private="false"
      >
        <div
          class="MuiCardHeader-root-id Metadata-header-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Metadata
              <button
                class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                data-test-id="expand"
                tabindex="0"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="24"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m8 10.5 4 4 4-4"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="1.5"
                  />
                  <circle
                    cx="12"
                    cy="12"
                    r="10.25"
                    stroke="currentColor"
                    stroke-width="1.5"
                  />
                </svg>
              </button>
            </span>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id Metadata-content-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
          >
            1 string
          </div>
        </div>
        <table
          class="MuiTable-root-id Metadata-table-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                scope="col"
              >
                Field
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                scope="col"
              >
                Value
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                scope="col"
              >
                Actions
              </th>
            </tr>
          </thead>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id"
              data-test-id="field"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                      name="name:0"
                      type="text"
                      value="integration.id"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                  >
                    <textarea
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                      name="value:0"
                      rows="1"
                    >
                      100023123
                    </textarea>
                    <textarea
                      aria-hidden="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                      readonly=""
                      style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                      tabindex="-1"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  data-test-id="delete-field-0"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
        <div
          class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
            data-test-id="add-field"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add Field
            </span>
          </button>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        data-test-expanded="true"
        data-test-id="metadata-editor"
        data-test-is-private="true"
      >
        <div
          class="MuiCardHeader-root-id Metadata-header-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Private Metadata
              <button
                class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                data-test-id="expand"
                tabindex="0"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="24"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m8 10.5 4 4 4-4"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="1.5"
                  />
                  <circle
                    cx="12"
                    cy="12"
                    r="10.25"
                    stroke="currentColor"
                    stroke-width="1.5"
                  />
                </svg>
              </button>
            </span>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id Metadata-content-id"
        />
        <div
          class="MuiCardContent-root-id Metadata-emptyContainer-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
          >
            No metadata created for this element. Use the button below to add new metadata field.
          </div>
        </div>
        <div
          class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
            data-test-id="add-field"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add Field
            </span>
          </button>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="TabContainer-root-id"
      >
        <span
          class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
        >
          Subcategories
        </span>
        <span
          class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
          data-test-id="products-tab"
        >
          Products
        </span>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              All Subcategories
            </span>
          </div>
          <div
            class="MuiCardHeader-action-id"
          >
            <a
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
              data-test-id="create-subcategory"
              href="/categories/123/add"
              role="button"
              tabindex="0"
            >
              <span
                class="MuiButton-label-id"
              >
                Create subcategory
              </span>
            </a>
          </div>
        </div>
        <div
          class="ResponsiveTable-root-id"
        >
          <table
            class="MuiTable-root-id"
          >
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colName-id TableCellHeader-disabled-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Category Name
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colSubcategories-id TableCellHeader-disabled-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Subcategories
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colProducts-id TableCellHeader-disabled-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      No. of Products
                    </div>
                  </div>
                </th>
              </tr>
            </thead>
            <tfoot
              class="MuiTableFooter-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id"
                  colspan="3"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                  >
                    <div
                      class="Pagination-spacer-id"
                    />
                    <div
                      class="Pagination-actions-id"
                    >
                      <button
                        aria-label="previous page"
                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-back"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                          />
                        </svg>
                      </button>
                      <button
                        aria-label="next page"
                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-next"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                </td>
              </tr>
            </tfoot>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id"
                  colspan="3"
                >
                  No subcategories found
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Categories / Update category loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
              style="width:10em"
            >
              ‌
            </span>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              General Information
            </span>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
        >
          <div>
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                data-shrink="false"
              >
                Category Name
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                  disabled=""
                  name="name"
                  type="text"
                  value=""
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id"
                  >
                    <span>
                      Category Name
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
            data-test-id="rich-text-editor-description"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
              data-shrink="true"
            >
              Category Description
            </label>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
            />
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Background Image (optional)
            </span>
          </div>
          <div
            class="MuiCardHeader-action-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Upload image
              </span>
            </button>
            <input
              accept="image/*"
              class="CategoryBackground-fileField-id"
              id="fileUpload"
              type="file"
            />
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
        >
          <div>
            <div
              class="CategoryBackground-imageContainer-id"
            >
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Search Engine Preview
            </span>
          </div>
          <div
            class="MuiCardHeader-action-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
              data-test-id="edit-seo"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Edit website SEO
              </span>
            </button>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Add search engine title and description to make this category easier to find
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        data-test-expanded="true"
        data-test-id="metadata-editor"
        data-test-is-private="false"
      >
        <div
          class="MuiCardHeader-root-id Metadata-header-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Metadata
              <button
                class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                data-test-id="expand"
                tabindex="0"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="24"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m8 10.5 4 4 4-4"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="1.5"
                  />
                  <circle
                    cx="12"
                    cy="12"
                    r="10.25"
                    stroke="currentColor"
                    stroke-width="1.5"
                  />
                </svg>
              </button>
            </span>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
        >
          <span
            class="Skeleton-skeleton-id"
            data-test-id="skeleton"
          >
            ‌
          </span>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        data-test-expanded="true"
        data-test-id="metadata-editor"
        data-test-is-private="true"
      >
        <div
          class="MuiCardHeader-root-id Metadata-header-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Private Metadata
              <button
                class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                data-test-id="expand"
                tabindex="0"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="24"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m8 10.5 4 4 4-4"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="1.5"
                  />
                  <circle
                    cx="12"
                    cy="12"
                    r="10.25"
                    stroke="currentColor"
                    stroke-width="1.5"
                  />
                </svg>
              </button>
            </span>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
        >
          <span
            class="Skeleton-skeleton-id"
            data-test-id="skeleton"
          >
            ‌
          </span>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="TabContainer-root-id"
      >
        <span
          class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
        >
          Subcategories
        </span>
        <span
          class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
          data-test-id="products-tab"
        >
          Products
        </span>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              All Subcategories
            </span>
          </div>
          <div
            class="MuiCardHeader-action-id"
          >
            <a
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
              data-test-id="create-subcategory"
              href="/categories/123/add"
              role="button"
              tabindex="0"
            >
              <span
                class="MuiButton-label-id"
              >
                Create subcategory
              </span>
            </a>
          </div>
        </div>
        <div
          class="ResponsiveTable-root-id"
        >
          <table
            class="MuiTable-root-id"
          >
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                  scope="col"
                >
                  <span
                    aria-disabled="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                    tabindex="-1"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        disabled=""
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colName-id TableCellHeader-disabled-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Category Name
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colSubcategories-id TableCellHeader-disabled-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Subcategories
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colProducts-id TableCellHeader-disabled-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      No. of Products
                    </div>
                  </div>
                </th>
              </tr>
            </thead>
            <tfoot
              class="MuiTableFooter-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id"
                  colspan="4"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                  >
                    <div
                      class="Pagination-spacer-id"
                    />
                    <div
                      class="Pagination-actions-id"
                    >
                      <button
                        aria-label="previous page"
                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-back"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                          />
                        </svg>
                      </button>
                      <button
                        aria-label="next page"
                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-next"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                </td>
              </tr>
            </tfoot>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id CategoryList-tableRow-id"
                data-test-id="id-undefined"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                    tabindex="-1"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        disabled=""
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
                  data-test-id="name"
                >
                  <span
                    class="Skeleton-skeleton-id"
                    data-test-id="skeleton"
                  >
                    ‌
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                    data-test-id="skeleton"
                  >
                    ‌
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                    data-test-id="skeleton"
                  >
                    ‌
                  </span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Categories / Update category no background 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Coffees
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              General Information
            </span>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
        >
          <div>
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Category Name
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="name"
                  type="text"
                  value="Coffees"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                  >
                    <span>
                      Category Name
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
            data-test-id="rich-text-editor-description"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
              data-shrink="true"
            >
              Category Description
            </label>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
            />
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Background Image (optional)
            </span>
          </div>
          <div
            class="MuiCardHeader-action-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Upload image
              </span>
            </button>
            <input
              accept="image/*"
              class="CategoryBackground-fileField-id"
              id="fileUpload"
              type="file"
            />
          </div>
        </div>
        <div
          class="ImageUpload-photosIconContainer-id"
          tabindex="0"
        >
          <div
            class=""
          >
            <input
              accept="image/*"
              autocomplete="off"
              class="ImageUpload-fileField-id"
              multiple=""
              style="display:none"
              tabindex="-1"
              type="file"
            />
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                clip-rule="evenodd"
                d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
            <div
              class="MuiTypography-root-id ImageUpload-uploadText-id MuiTypography-body1-id"
            >
              Drop here to upload
            </div>
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Search Engine Preview
            </span>
          </div>
          <div
            class="MuiCardHeader-action-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
              data-test-id="edit-seo"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Edit website SEO
              </span>
            </button>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Add search engine title and description to make this category easier to find
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        data-test-expanded="true"
        data-test-id="metadata-editor"
        data-test-is-private="false"
      >
        <div
          class="MuiCardHeader-root-id Metadata-header-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Metadata
              <button
                class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                data-test-id="expand"
                tabindex="0"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="24"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m8 10.5 4 4 4-4"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="1.5"
                  />
                  <circle
                    cx="12"
                    cy="12"
                    r="10.25"
                    stroke="currentColor"
                    stroke-width="1.5"
                  />
                </svg>
              </button>
            </span>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id Metadata-content-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
          >
            1 string
          </div>
        </div>
        <table
          class="MuiTable-root-id Metadata-table-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                scope="col"
              >
                Field
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                scope="col"
              >
                Value
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                scope="col"
              >
                Actions
              </th>
            </tr>
          </thead>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id"
              data-test-id="field"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                      name="name:0"
                      type="text"
                      value="integration.id"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                  >
                    <textarea
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                      name="value:0"
                      rows="1"
                    >
                      100023123
                    </textarea>
                    <textarea
                      aria-hidden="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                      readonly=""
                      style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                      tabindex="-1"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  data-test-id="delete-field-0"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
        <div
          class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
            data-test-id="add-field"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add Field
            </span>
          </button>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        data-test-expanded="true"
        data-test-id="metadata-editor"
        data-test-is-private="true"
      >
        <div
          class="MuiCardHeader-root-id Metadata-header-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Private Metadata
              <button
                class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                data-test-id="expand"
                tabindex="0"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="24"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m8 10.5 4 4 4-4"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="1.5"
                  />
                  <circle
                    cx="12"
                    cy="12"
                    r="10.25"
                    stroke="currentColor"
                    stroke-width="1.5"
                  />
                </svg>
              </button>
            </span>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id Metadata-content-id"
        />
        <div
          class="MuiCardContent-root-id Metadata-emptyContainer-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
          >
            No metadata created for this element. Use the button below to add new metadata field.
          </div>
        </div>
        <div
          class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
            data-test-id="add-field"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add Field
            </span>
          </button>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="TabContainer-root-id"
      >
        <span
          class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
        >
          Subcategories
        </span>
        <span
          class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
          data-test-id="products-tab"
        >
          Products
        </span>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              All Subcategories
            </span>
          </div>
          <div
            class="MuiCardHeader-action-id"
          >
            <a
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
              data-test-id="create-subcategory"
              href="/categories/123/add"
              role="button"
              tabindex="0"
            >
              <span
                class="MuiButton-label-id"
              >
                Create subcategory
              </span>
            </a>
          </div>
        </div>
        <div
          class="ResponsiveTable-root-id"
        >
          <table
            class="MuiTable-root-id"
          >
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colName-id TableCellHeader-disabled-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Category Name
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colSubcategories-id TableCellHeader-disabled-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Subcategories
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colProducts-id TableCellHeader-disabled-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      No. of Products
                    </div>
                  </div>
                </th>
              </tr>
            </thead>
            <tfoot
              class="MuiTableFooter-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id"
                  colspan="3"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                  >
                    <div
                      class="Pagination-spacer-id"
                    />
                    <div
                      class="Pagination-actions-id"
                    >
                      <button
                        aria-label="previous page"
                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-back"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                          />
                        </svg>
                      </button>
                      <button
                        aria-label="next page"
                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-next"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                </td>
              </tr>
            </tfoot>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id"
                  colspan="3"
                >
                  No subcategories found
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Categories / Update category no products 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Coffees
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              General Information
            </span>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
        >
          <div>
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Category Name
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="name"
                  type="text"
                  value="Coffees"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                  >
                    <span>
                      Category Name
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
            data-test-id="rich-text-editor-description"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
              data-shrink="true"
            >
              Category Description
            </label>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
            />
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Background Image (optional)
            </span>
          </div>
          <div
            class="MuiCardHeader-action-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Upload image
              </span>
            </button>
            <input
              accept="image/*"
              class="CategoryBackground-fileField-id"
              id="fileUpload"
              type="file"
            />
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MediaTile-mediaContainer-id"
            data-test-id="product-image"
          >
            <div
              class="MediaTile-mediaOverlay-id"
            >
              <div
                class="MediaTile-mediaOverlayToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </div>
            </div>
            <img
              alt="Alt text"
              class="MediaTile-media-id"
              src="placeholder255x255.png"
            />
          </div>
        </div>
        <hr
          class="Hr-root-id"
        />
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
              data-shrink="true"
            >
              Description
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
            >
              <textarea
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                name="backgroundImageAlt"
                rows="1"
              >
                Alt text
              </textarea>
              <textarea
                aria-hidden="true"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                readonly=""
                style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                tabindex="-1"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                >
                  <span>
                    Description
                  </span>
                </legend>
              </fieldset>
            </div>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
            >
              (Optional)
            </p>
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Search Engine Preview
            </span>
          </div>
          <div
            class="MuiCardHeader-action-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
              data-test-id="edit-seo"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Edit website SEO
              </span>
            </button>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Add search engine title and description to make this category easier to find
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        data-test-expanded="true"
        data-test-id="metadata-editor"
        data-test-is-private="false"
      >
        <div
          class="MuiCardHeader-root-id Metadata-header-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Metadata
              <button
                class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                data-test-id="expand"
                tabindex="0"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="24"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m8 10.5 4 4 4-4"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="1.5"
                  />
                  <circle
                    cx="12"
                    cy="12"
                    r="10.25"
                    stroke="currentColor"
                    stroke-width="1.5"
                  />
                </svg>
              </button>
            </span>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id Metadata-content-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
          >
            1 string
          </div>
        </div>
        <table
          class="MuiTable-root-id Metadata-table-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                scope="col"
              >
                Field
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                scope="col"
              >
                Value
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                scope="col"
              >
                Actions
              </th>
            </tr>
          </thead>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id"
              data-test-id="field"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                      name="name:0"
                      type="text"
                      value="integration.id"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                  >
                    <textarea
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                      name="value:0"
                      rows="1"
                    >
                      100023123
                    </textarea>
                    <textarea
                      aria-hidden="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                      readonly=""
                      style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                      tabindex="-1"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  data-test-id="delete-field-0"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
        <div
          class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
            data-test-id="add-field"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add Field
            </span>
          </button>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        data-test-expanded="true"
        data-test-id="metadata-editor"
        data-test-is-private="true"
      >
        <div
          class="MuiCardHeader-root-id Metadata-header-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Private Metadata
              <button
                class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                data-test-id="expand"
                tabindex="0"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="24"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m8 10.5 4 4 4-4"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="1.5"
                  />
                  <circle
                    cx="12"
                    cy="12"
                    r="10.25"
                    stroke="currentColor"
                    stroke-width="1.5"
                  />
                </svg>
              </button>
            </span>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id Metadata-content-id"
        />
        <div
          class="MuiCardContent-root-id Metadata-emptyContainer-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
          >
            No metadata created for this element. Use the button below to add new metadata field.
          </div>
        </div>
        <div
          class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
            data-test-id="add-field"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add Field
            </span>
          </button>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="TabContainer-root-id"
      >
        <span
          class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
        >
          Subcategories
        </span>
        <span
          class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
          data-test-id="products-tab"
        >
          Products
        </span>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Products in Coffees
            </span>
          </div>
          <div
            class="MuiCardHeader-action-id"
          >
            <div
              class="CategoryProducts-toolbar-id"
            >
              <a
                class="InternalLink-root-id"
                href="/products/?categories%5B0%5D=Q2F0ZWdvcnk6NA%3D%3D"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="view-products"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    View products
                  </span>
                </button>
              </a>
              <div
                class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
              />
              <a
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                data-test-id="add-products"
                href="/products/add"
                role="button"
                tabindex="0"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add product
                </span>
              </a>
            </div>
          </div>
        </div>
        <div
          class="CategoryProductList-tableContainer-id"
        >
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id CategoryProductList-table-id"
            >
              <colgroup>
                <col />
                <col
                  class="CategoryProductList-colName-id"
                />
              </colgroup>
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id CategoryProductList-colName-id"
                    scope="col"
                  >
                    <span
                      class="CategoryProductList-colNameHeader-id"
                    >
                      Name
                    </span>
                  </th>
                </tr>
              </thead>
              <tfoot
                class="MuiTableFooter-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-footer-id"
                    colspan="2"
                  >
                    <div
                      class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                    >
                      <div
                        class="Pagination-spacer-id"
                      />
                      <div
                        class="Pagination-actions-id"
                      >
                        <button
                          aria-label="previous page"
                          class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                          data-test="button-pagination-back"
                          disabled=""
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="next page"
                          class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                          data-test="button-pagination-next"
                          disabled=""
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                  </td>
                </tr>
              </tfoot>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                    colspan="2"
                  >
                    No products found
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Categories / Update category no subcategories 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Coffees
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              General Information
            </span>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
        >
          <div>
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Category Name
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="name"
                  type="text"
                  value="Coffees"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                  >
                    <span>
                      Category Name
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
            data-test-id="rich-text-editor-description"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
              data-shrink="true"
            >
              Category Description
            </label>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
            />
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Background Image (optional)
            </span>
          </div>
          <div
            class="MuiCardHeader-action-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Upload image
              </span>
            </button>
            <input
              accept="image/*"
              class="CategoryBackground-fileField-id"
              id="fileUpload"
              type="file"
            />
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MediaTile-mediaContainer-id"
            data-test-id="product-image"
          >
            <div
              class="MediaTile-mediaOverlay-id"
            >
              <div
                class="MediaTile-mediaOverlayToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </div>
            </div>
            <img
              alt="Alt text"
              class="MediaTile-media-id"
              src="placeholder255x255.png"
            />
          </div>
        </div>
        <hr
          class="Hr-root-id"
        />
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
              data-shrink="true"
            >
              Description
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
            >
              <textarea
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                name="backgroundImageAlt"
                rows="1"
              >
                Alt text
              </textarea>
              <textarea
                aria-hidden="true"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                readonly=""
                style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                tabindex="-1"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                >
                  <span>
                    Description
                  </span>
                </legend>
              </fieldset>
            </div>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
            >
              (Optional)
            </p>
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Search Engine Preview
            </span>
          </div>
          <div
            class="MuiCardHeader-action-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
              data-test-id="edit-seo"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Edit website SEO
              </span>
            </button>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Add search engine title and description to make this category easier to find
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        data-test-expanded="true"
        data-test-id="metadata-editor"
        data-test-is-private="false"
      >
        <div
          class="MuiCardHeader-root-id Metadata-header-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Metadata
              <button
                class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                data-test-id="expand"
                tabindex="0"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="24"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m8 10.5 4 4 4-4"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="1.5"
                  />
                  <circle
                    cx="12"
                    cy="12"
                    r="10.25"
                    stroke="currentColor"
                    stroke-width="1.5"
                  />
                </svg>
              </button>
            </span>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id Metadata-content-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
          >
            1 string
          </div>
        </div>
        <table
          class="MuiTable-root-id Metadata-table-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                scope="col"
              >
                Field
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                scope="col"
              >
                Value
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                scope="col"
              >
                Actions
              </th>
            </tr>
          </thead>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id"
              data-test-id="field"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                      name="name:0"
                      type="text"
                      value="integration.id"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                  >
                    <textarea
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                      name="value:0"
                      rows="1"
                    >
                      100023123
                    </textarea>
                    <textarea
                      aria-hidden="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                      readonly=""
                      style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                      tabindex="-1"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  data-test-id="delete-field-0"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
        <div
          class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
            data-test-id="add-field"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add Field
            </span>
          </button>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        data-test-expanded="true"
        data-test-id="metadata-editor"
        data-test-is-private="true"
      >
        <div
          class="MuiCardHeader-root-id Metadata-header-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Private Metadata
              <button
                class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                data-test-id="expand"
                tabindex="0"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="24"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m8 10.5 4 4 4-4"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="1.5"
                  />
                  <circle
                    cx="12"
                    cy="12"
                    r="10.25"
                    stroke="currentColor"
                    stroke-width="1.5"
                  />
                </svg>
              </button>
            </span>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id Metadata-content-id"
        />
        <div
          class="MuiCardContent-root-id Metadata-emptyContainer-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
          >
            No metadata created for this element. Use the button below to add new metadata field.
          </div>
        </div>
        <div
          class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
            data-test-id="add-field"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add Field
            </span>
          </button>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="TabContainer-root-id"
      >
        <span
          class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
        >
          Subcategories
        </span>
        <span
          class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
          data-test-id="products-tab"
        >
          Products
        </span>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              All Subcategories
            </span>
          </div>
          <div
            class="MuiCardHeader-action-id"
          >
            <a
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
              data-test-id="create-subcategory"
              href="/categories/123/add"
              role="button"
              tabindex="0"
            >
              <span
                class="MuiButton-label-id"
              >
                Create subcategory
              </span>
            </a>
          </div>
        </div>
        <div
          class="ResponsiveTable-root-id"
        >
          <table
            class="MuiTable-root-id"
          >
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colName-id TableCellHeader-disabled-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Category Name
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colSubcategories-id TableCellHeader-disabled-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Subcategories
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colProducts-id TableCellHeader-disabled-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      No. of Products
                    </div>
                  </div>
                </th>
              </tr>
            </thead>
            <tfoot
              class="MuiTableFooter-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id"
                  colspan="3"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                  >
                    <div
                      class="Pagination-spacer-id"
                    />
                    <div
                      class="Pagination-actions-id"
                    >
                      <button
                        aria-label="previous page"
                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-back"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                          />
                        </svg>
                      </button>
                      <button
                        aria-label="next page"
                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-next"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                </td>
              </tr>
            </tfoot>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id"
                  colspan="3"
                >
                  No subcategories found
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Categories / Update category products 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Coffees
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              General Information
            </span>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
        >
          <div>
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Category Name
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="name"
                  type="text"
                  value="Coffees"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                  >
                    <span>
                      Category Name
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
            data-test-id="rich-text-editor-description"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
              data-shrink="true"
            >
              Category Description
            </label>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
            />
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Background Image (optional)
            </span>
          </div>
          <div
            class="MuiCardHeader-action-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Upload image
              </span>
            </button>
            <input
              accept="image/*"
              class="CategoryBackground-fileField-id"
              id="fileUpload"
              type="file"
            />
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MediaTile-mediaContainer-id"
            data-test-id="product-image"
          >
            <div
              class="MediaTile-mediaOverlay-id"
            >
              <div
                class="MediaTile-mediaOverlayToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </div>
            </div>
            <img
              alt="Alt text"
              class="MediaTile-media-id"
              src="placeholder255x255.png"
            />
          </div>
        </div>
        <hr
          class="Hr-root-id"
        />
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
              data-shrink="true"
            >
              Description
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
            >
              <textarea
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                name="backgroundImageAlt"
                rows="1"
              >
                Alt text
              </textarea>
              <textarea
                aria-hidden="true"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                readonly=""
                style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                tabindex="-1"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                >
                  <span>
                    Description
                  </span>
                </legend>
              </fieldset>
            </div>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
            >
              (Optional)
            </p>
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Search Engine Preview
            </span>
          </div>
          <div
            class="MuiCardHeader-action-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
              data-test-id="edit-seo"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Edit website SEO
              </span>
            </button>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Add search engine title and description to make this category easier to find
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        data-test-expanded="true"
        data-test-id="metadata-editor"
        data-test-is-private="false"
      >
        <div
          class="MuiCardHeader-root-id Metadata-header-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Metadata
              <button
                class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                data-test-id="expand"
                tabindex="0"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="24"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m8 10.5 4 4 4-4"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="1.5"
                  />
                  <circle
                    cx="12"
                    cy="12"
                    r="10.25"
                    stroke="currentColor"
                    stroke-width="1.5"
                  />
                </svg>
              </button>
            </span>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id Metadata-content-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
          >
            1 string
          </div>
        </div>
        <table
          class="MuiTable-root-id Metadata-table-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                scope="col"
              >
                Field
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                scope="col"
              >
                Value
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                scope="col"
              >
                Actions
              </th>
            </tr>
          </thead>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id"
              data-test-id="field"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                      name="name:0"
                      type="text"
                      value="integration.id"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                  >
                    <textarea
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                      name="value:0"
                      rows="1"
                    >
                      100023123
                    </textarea>
                    <textarea
                      aria-hidden="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                      readonly=""
                      style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                      tabindex="-1"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  data-test-id="delete-field-0"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
        <div
          class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
            data-test-id="add-field"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add Field
            </span>
          </button>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        data-test-expanded="true"
        data-test-id="metadata-editor"
        data-test-is-private="true"
      >
        <div
          class="MuiCardHeader-root-id Metadata-header-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Private Metadata
              <button
                class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                data-test-id="expand"
                tabindex="0"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="24"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m8 10.5 4 4 4-4"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="1.5"
                  />
                  <circle
                    cx="12"
                    cy="12"
                    r="10.25"
                    stroke="currentColor"
                    stroke-width="1.5"
                  />
                </svg>
              </button>
            </span>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id Metadata-content-id"
        />
        <div
          class="MuiCardContent-root-id Metadata-emptyContainer-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
          >
            No metadata created for this element. Use the button below to add new metadata field.
          </div>
        </div>
        <div
          class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
            data-test-id="add-field"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add Field
            </span>
          </button>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="TabContainer-root-id"
      >
        <span
          class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
        >
          Subcategories
        </span>
        <span
          class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
          data-test-id="products-tab"
        >
          Products
        </span>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Products in Coffees
            </span>
          </div>
          <div
            class="MuiCardHeader-action-id"
          >
            <div
              class="CategoryProducts-toolbar-id"
            >
              <a
                class="InternalLink-root-id"
                href="/products/?categories%5B0%5D=Q2F0ZWdvcnk6NA%3D%3D"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="view-products"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    View products
                  </span>
                </button>
              </a>
              <div
                class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
              />
              <a
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                data-test-id="add-products"
                href="/products/add"
                role="button"
                tabindex="0"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add product
                </span>
              </a>
            </div>
          </div>
        </div>
        <div
          class="CategoryProductList-tableContainer-id"
        >
          <div
            class="ResponsiveTable-root-id"
          >
            <a
              class="TableRowLink-link-id"
              href="/products/UHJvZHVjdDoyMQ%3D%3D"
            />
            <a
              class="TableRowLink-link-id"
              href="/products/UHJvZHVjdDoyMg%3D%3D"
            />
            <a
              class="TableRowLink-link-id"
              href="/products/UHJvZHVjdDoyMw%3D%3D"
            />
            <a
              class="TableRowLink-link-id"
              href="/products/UHJvZHVjdDoyNA%3D%3D"
            />
            <a
              class="TableRowLink-link-id"
              href="/products/UHJvZHVjdDoyNQ%3D%3D"
            />
            <a
              class="TableRowLink-link-id"
              href="/products/UHJvZHVjdDoyNg%3D%3D"
            />
            <a
              class="TableRowLink-link-id"
              href="/products/UHJvZHVjdDoyNw%3D%3D"
            />
            <a
              class="TableRowLink-link-id"
              href="/products/UHJvZHVjdDoyOA%3D%3D"
            />
            <a
              class="TableRowLink-link-id"
              href="/products/UHJvZHVjdDoyOQ%3D%3D"
            />
            <a
              class="TableRowLink-link-id"
              href="/products/UHJvZHVjdDozMA%3D%3D"
            />
            <table
              class="MuiTable-root-id CategoryProductList-table-id"
            >
              <colgroup>
                <col />
                <col
                  class="CategoryProductList-colName-id"
                />
              </colgroup>
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                    scope="col"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id CategoryProductList-colName-id"
                    scope="col"
                  >
                    <span
                      class="CategoryProductList-colNameHeader-id"
                    >
                      Name
                    </span>
                  </th>
                </tr>
              </thead>
              <tfoot
                class="MuiTableFooter-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-footer-id"
                    colspan="2"
                  >
                    <div
                      class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                    >
                      <div
                        class="Pagination-spacer-id"
                      />
                      <div
                        class="Pagination-actions-id"
                      >
                        <button
                          aria-label="previous page"
                          class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                          data-test="button-pagination-back"
                          disabled=""
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="next page"
                          class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                          data-test="button-pagination-next"
                          disabled=""
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                  </td>
                </tr>
              </tfoot>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
                  data-test-id="product-row"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                    data-test-id="table-cell-avatar"
                    thumbnail="placeholder255x255.png"
                  >
                    <div
                      class="Avatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder255x255.png"
                        />
                      </div>
                      <div
                        class="Avatar-children-id"
                      >
                        Gardner-Schultz
                      </div>
                    </div>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
                  data-test-id="product-row"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                    data-test-id="table-cell-avatar"
                    thumbnail="placeholder255x255.png"
                  >
                    <div
                      class="Avatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder255x255.png"
                        />
                      </div>
                      <div
                        class="Avatar-children-id"
                      >
                        James, Martinez and Murray
                      </div>
                    </div>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
                  data-test-id="product-row"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                    data-test-id="table-cell-avatar"
                    thumbnail="placeholder255x255.png"
                  >
                    <div
                      class="Avatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder255x255.png"
                        />
                      </div>
                      <div
                        class="Avatar-children-id"
                      >
                        Curtis, Joyce and Turner
                      </div>
                    </div>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
                  data-test-id="product-row"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                    data-test-id="table-cell-avatar"
                    thumbnail="placeholder255x255.png"
                  >
                    <div
                      class="Avatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder255x255.png"
                        />
                      </div>
                      <div
                        class="Avatar-children-id"
                      >
                        Davis, Brown and Ray
                      </div>
                    </div>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
                  data-test-id="product-row"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                    data-test-id="table-cell-avatar"
                    thumbnail="placeholder255x255.png"
                  >
                    <div
                      class="Avatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder255x255.png"
                        />
                      </div>
                      <div
                        class="Avatar-children-id"
                      >
                        Gallegos Ltd
                      </div>
                    </div>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
                  data-test-id="product-row"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                    data-test-id="table-cell-avatar"
                    thumbnail="placeholder255x255.png"
                  >
                    <div
                      class="Avatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder255x255.png"
                        />
                      </div>
                      <div
                        class="Avatar-children-id"
                      >
                        Franklin Inc
                      </div>
                    </div>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
                  data-test-id="product-row"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                    data-test-id="table-cell-avatar"
                    thumbnail="placeholder255x255.png"
                  >
                    <div
                      class="Avatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder255x255.png"
                        />
                      </div>
                      <div
                        class="Avatar-children-id"
                      >
                        Williams-Taylor
                      </div>
                    </div>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
                  data-test-id="product-row"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                    data-test-id="table-cell-avatar"
                    thumbnail="placeholder255x255.png"
                  >
                    <div
                      class="Avatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder255x255.png"
                        />
                      </div>
                      <div
                        class="Avatar-children-id"
                      >
                        Riddle, Evans and Hicks
                      </div>
                    </div>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
                  data-test-id="product-row"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                    data-test-id="table-cell-avatar"
                    thumbnail="placeholder255x255.png"
                  >
                    <div
                      class="Avatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder255x255.png"
                        />
                      </div>
                      <div
                        class="Avatar-children-id"
                      >
                        Hebert-Sherman
                      </div>
                    </div>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
                  data-test-id="product-row"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                    data-test-id="table-cell-avatar"
                    thumbnail="placeholder255x255.png"
                  >
                    <div
                      class="Avatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder255x255.png"
                        />
                      </div>
                      <div
                        class="Avatar-children-id"
                      >
                        Carter and Sons
                      </div>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Channels / Channel details default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                General Information
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                data-shrink="false"
              >
                Channel name
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="name"
                  type="text"
                  value=""
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id"
                  >
                    <span>
                      Channel name
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                data-shrink="false"
              >
                Slug
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  name="slug"
                  type="text"
                  value=""
                />
                <div
                  class="MuiInputAdornment-root-id ChannelComponents-copyBtn-id MuiInputAdornment-positionEnd-id"
                >
                  Copy
                </div>
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id"
                  >
                    <span>
                      Slug
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Channel Settings
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              aria-expanded="false"
              aria-haspopup="listbox"
              aria-labelledby="downshift-3-label"
              class="SingleAutocompleteSelectField-container-id"
              data-test-id="channel-currency-select-input"
              role="combobox"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Currency
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-autocomplete="list"
                    aria-invalid="false"
                    aria-labelledby="downshift-3-label"
                    autocomplete="off"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    id="downshift-3-input"
                    type="text"
                    value=""
                  />
                  <div
                    aria-haspopup="true"
                    aria-label="open menu"
                    class="SingleAutocompleteSelectField-adornment-id"
                    data-toggle="true"
                    role="button"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                    </svg>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Currency
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              aria-expanded="false"
              aria-haspopup="listbox"
              aria-labelledby="downshift-4-label"
              class="SingleAutocompleteSelectField-container-id"
              data-test-id="country-select-input"
              role="combobox"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Default country
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-autocomplete="list"
                    aria-invalid="false"
                    aria-labelledby="downshift-4-label"
                    autocomplete="off"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    id="downshift-4-input"
                    type="text"
                    value=""
                  />
                  <div
                    aria-haspopup="true"
                    aria-label="open menu"
                    class="SingleAutocompleteSelectField-adornment-id"
                    data-toggle="true"
                    role="button"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                    </svg>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Default country
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Channel Status
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id ChannelComponents-label-id MuiTypography-caption-id"
            >
              Status
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Inactive
            </div>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ChannelComponents-activeBtn-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Activate
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Shipping Zones
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Select shipping zones that will be supplied via this channel. You can assign shipping zones to multiple channels.
            </div>
          </div>
          <div
            class="MuiPaper-root-id MuiAccordion-root-id Expander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          >
            <div
              class="AssignmentListHeader-container-id"
            >
              <div
                aria-disabled="false"
                aria-expanded="false"
                class="MuiButtonBase-root-id MuiAccordionSummary-root-id AssignmentListHeader-root-id"
                role="button"
                tabindex="0"
              >
                <div
                  class="MuiAccordionSummary-content-id AssignmentListHeader-content-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
                  >
                    2 / 0 shipping zones
                  </div>
                </div>
                <div
                  aria-disabled="false"
                  aria-hidden="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      data-test-id="expand-icon"
                      fill="none"
                      height="7"
                      viewBox="0 0 10 7"
                      width="10"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M1 1L5 5L9 1"
                        stroke="#28234A"
                        stroke-opacity="0.4"
                        stroke-width="2"
                      />
                    </svg>
                  </span>
                </div>
              </div>
              <div
                class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
              />
            </div>
            <div
              class="MuiCollapse-container-id MuiCollapse-hidden-id"
              style="min-height:0px"
            >
              <div
                class="MuiCollapse-wrapper-id"
              >
                <div
                  class="MuiCollapse-wrapperInner-id"
                >
                  <div
                    role="region"
                  >
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="AssignmentList-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Europe
                      </div>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="AssignmentList-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        USA
                      </div>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="CardAddItemsFooter-container-id"
                    >
                      <a
                        class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                        data-test-id="shipping-add-link"
                      >
                        Add Shipping Zones
                      </a>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        data-test-id="shipping-add-button"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Warehouses
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Select warehouses that will be used in this channel. You can assign warehouses to multiple channels.
            </div>
          </div>
          <div
            class="MuiPaper-root-id MuiAccordion-root-id Expander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          >
            <div
              class="AssignmentListHeader-container-id"
            >
              <div
                aria-disabled="false"
                aria-expanded="false"
                class="MuiButtonBase-root-id MuiAccordionSummary-root-id AssignmentListHeader-root-id"
                role="button"
                tabindex="0"
              >
                <div
                  class="MuiAccordionSummary-content-id AssignmentListHeader-content-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
                  >
                    2 / 0 warehouses
                  </div>
                </div>
                <div
                  aria-disabled="false"
                  aria-hidden="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      data-test-id="expand-icon"
                      fill="none"
                      height="7"
                      viewBox="0 0 10 7"
                      width="10"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M1 1L5 5L9 1"
                        stroke="#28234A"
                        stroke-opacity="0.4"
                        stroke-width="2"
                      />
                    </svg>
                  </span>
                </div>
              </div>
              <div
                class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
              />
            </div>
            <div
              class="MuiCollapse-container-id MuiCollapse-hidden-id"
              style="min-height:0px"
            >
              <div
                class="MuiCollapse-wrapper-id"
              >
                <div
                  class="MuiCollapse-wrapperInner-id"
                >
                  <div
                    role="region"
                  >
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="AssignmentList-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Warehouse 1
                      </div>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="AssignmentList-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Warehouse 2
                      </div>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="CardAddItemsFooter-container-id"
                    >
                      <a
                        class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                        data-test-id="warehouse-add-link"
                      >
                        Add Warehouses
                      </a>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        data-test-id="warehouse-add-button"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Channels / Channel details disabled 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                General Information
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                data-shrink="false"
              >
                Channel name
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                  disabled=""
                  name="name"
                  type="text"
                  value=""
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id"
                  >
                    <span>
                      Channel name
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                data-shrink="false"
              >
                Slug
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  disabled=""
                  name="slug"
                  type="text"
                  value=""
                />
                <div
                  class="MuiInputAdornment-root-id ChannelComponents-copyBtn-id MuiInputAdornment-positionEnd-id"
                >
                  Copy
                </div>
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id"
                  >
                    <span>
                      Slug
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Channel Settings
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              aria-expanded="false"
              aria-haspopup="listbox"
              aria-labelledby="downshift-5-label"
              class="SingleAutocompleteSelectField-container-id"
              data-test-id="channel-currency-select-input"
              role="combobox"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Currency
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-autocomplete="list"
                    aria-invalid="false"
                    aria-labelledby="downshift-5-label"
                    autocomplete="off"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    disabled=""
                    id="downshift-5-input"
                    type="text"
                    value=""
                  />
                  <div
                    aria-haspopup="true"
                    aria-label="open menu"
                    class="SingleAutocompleteSelectField-adornment-id"
                    data-toggle="true"
                    role="button"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                    </svg>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Currency
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              aria-expanded="false"
              aria-haspopup="listbox"
              aria-labelledby="downshift-6-label"
              class="SingleAutocompleteSelectField-container-id"
              data-test-id="country-select-input"
              role="combobox"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Default country
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-autocomplete="list"
                    aria-invalid="false"
                    aria-labelledby="downshift-6-label"
                    autocomplete="off"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    disabled=""
                    id="downshift-6-input"
                    type="text"
                    value=""
                  />
                  <div
                    aria-haspopup="true"
                    aria-label="open menu"
                    class="SingleAutocompleteSelectField-adornment-id"
                    data-toggle="true"
                    role="button"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                    </svg>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Default country
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Channel Status
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id ChannelComponents-label-id MuiTypography-caption-id"
            >
              Status
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Inactive
            </div>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ChannelComponents-activeBtn-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Activate
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Shipping Zones
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Select shipping zones that will be supplied via this channel. You can assign shipping zones to multiple channels.
            </div>
          </div>
          <div
            class="MuiPaper-root-id MuiAccordion-root-id Expander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          >
            <div
              class="AssignmentListHeader-container-id"
            >
              <div
                aria-disabled="false"
                aria-expanded="false"
                class="MuiButtonBase-root-id MuiAccordionSummary-root-id AssignmentListHeader-root-id"
                role="button"
                tabindex="0"
              >
                <div
                  class="MuiAccordionSummary-content-id AssignmentListHeader-content-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
                  >
                    2 / 0 shipping zones
                  </div>
                </div>
                <div
                  aria-disabled="false"
                  aria-hidden="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      data-test-id="expand-icon"
                      fill="none"
                      height="7"
                      viewBox="0 0 10 7"
                      width="10"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M1 1L5 5L9 1"
                        stroke="#28234A"
                        stroke-opacity="0.4"
                        stroke-width="2"
                      />
                    </svg>
                  </span>
                </div>
              </div>
              <div
                class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
              />
            </div>
            <div
              class="MuiCollapse-container-id MuiCollapse-hidden-id"
              style="min-height:0px"
            >
              <div
                class="MuiCollapse-wrapper-id"
              >
                <div
                  class="MuiCollapse-wrapperInner-id"
                >
                  <div
                    role="region"
                  >
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="AssignmentList-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Europe
                      </div>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="AssignmentList-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        USA
                      </div>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="CardAddItemsFooter-container-id"
                    >
                      <a
                        class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                        data-test-id="shipping-add-link"
                      >
                        Add Shipping Zones
                      </a>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        data-test-id="shipping-add-button"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Warehouses
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Select warehouses that will be used in this channel. You can assign warehouses to multiple channels.
            </div>
          </div>
          <div
            class="MuiPaper-root-id MuiAccordion-root-id Expander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          >
            <div
              class="AssignmentListHeader-container-id"
            >
              <div
                aria-disabled="false"
                aria-expanded="false"
                class="MuiButtonBase-root-id MuiAccordionSummary-root-id AssignmentListHeader-root-id"
                role="button"
                tabindex="0"
              >
                <div
                  class="MuiAccordionSummary-content-id AssignmentListHeader-content-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
                  >
                    2 / 0 warehouses
                  </div>
                </div>
                <div
                  aria-disabled="false"
                  aria-hidden="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      data-test-id="expand-icon"
                      fill="none"
                      height="7"
                      viewBox="0 0 10 7"
                      width="10"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M1 1L5 5L9 1"
                        stroke="#28234A"
                        stroke-opacity="0.4"
                        stroke-width="2"
                      />
                    </svg>
                  </span>
                </div>
              </div>
              <div
                class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
              />
            </div>
            <div
              class="MuiCollapse-container-id MuiCollapse-hidden-id"
              style="min-height:0px"
            >
              <div
                class="MuiCollapse-wrapper-id"
              >
                <div
                  class="MuiCollapse-wrapperInner-id"
                >
                  <div
                    role="region"
                  >
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="AssignmentList-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Warehouse 1
                      </div>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="AssignmentList-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Warehouse 2
                      </div>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="CardAddItemsFooter-container-id"
                    >
                      <a
                        class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                        data-test-id="warehouse-add-link"
                      >
                        Add Warehouses
                      </a>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        data-test-id="warehouse-add-button"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Channels / Channel details loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                General Information
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                data-shrink="false"
              >
                Channel name
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="name"
                  type="text"
                  value=""
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id"
                  >
                    <span>
                      Channel name
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                data-shrink="false"
              >
                Slug
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  name="slug"
                  type="text"
                  value=""
                />
                <div
                  class="MuiInputAdornment-root-id ChannelComponents-copyBtn-id MuiInputAdornment-positionEnd-id"
                >
                  Copy
                </div>
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id"
                  >
                    <span>
                      Slug
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Channel Settings
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              aria-expanded="false"
              aria-haspopup="listbox"
              aria-labelledby="downshift-7-label"
              class="SingleAutocompleteSelectField-container-id"
              data-test-id="channel-currency-select-input"
              role="combobox"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Currency
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-autocomplete="list"
                    aria-invalid="false"
                    aria-labelledby="downshift-7-label"
                    autocomplete="off"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    id="downshift-7-input"
                    type="text"
                    value=""
                  />
                  <div
                    aria-haspopup="true"
                    aria-label="open menu"
                    class="SingleAutocompleteSelectField-adornment-id"
                    data-toggle="true"
                    role="button"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                    </svg>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Currency
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              aria-expanded="false"
              aria-haspopup="listbox"
              aria-labelledby="downshift-8-label"
              class="SingleAutocompleteSelectField-container-id"
              data-test-id="country-select-input"
              role="combobox"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Default country
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-autocomplete="list"
                    aria-invalid="false"
                    aria-labelledby="downshift-8-label"
                    autocomplete="off"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    id="downshift-8-input"
                    type="text"
                    value=""
                  />
                  <div
                    aria-haspopup="true"
                    aria-label="open menu"
                    class="SingleAutocompleteSelectField-adornment-id"
                    data-toggle="true"
                    role="button"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                    </svg>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Default country
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Channel Status
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id ChannelComponents-label-id MuiTypography-caption-id"
            >
              Status
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Inactive
            </div>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ChannelComponents-activeBtn-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Activate
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Shipping Zones
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Select shipping zones that will be supplied via this channel. You can assign shipping zones to multiple channels.
            </div>
          </div>
          <div
            class="MuiPaper-root-id MuiAccordion-root-id Expander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          >
            <div
              class="AssignmentListHeader-container-id"
            >
              <div
                aria-disabled="false"
                aria-expanded="false"
                class="MuiButtonBase-root-id MuiAccordionSummary-root-id AssignmentListHeader-root-id"
                role="button"
                tabindex="0"
              >
                <div
                  class="MuiAccordionSummary-content-id AssignmentListHeader-content-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
                  >
                    2 / 0 shipping zones
                  </div>
                </div>
                <div
                  aria-disabled="false"
                  aria-hidden="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      data-test-id="expand-icon"
                      fill="none"
                      height="7"
                      viewBox="0 0 10 7"
                      width="10"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M1 1L5 5L9 1"
                        stroke="#28234A"
                        stroke-opacity="0.4"
                        stroke-width="2"
                      />
                    </svg>
                  </span>
                </div>
              </div>
              <div
                class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
              />
            </div>
            <div
              class="MuiCollapse-container-id MuiCollapse-hidden-id"
              style="min-height:0px"
            >
              <div
                class="MuiCollapse-wrapper-id"
              >
                <div
                  class="MuiCollapse-wrapperInner-id"
                >
                  <div
                    role="region"
                  >
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="AssignmentList-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Europe
                      </div>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="AssignmentList-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        USA
                      </div>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="CardAddItemsFooter-container-id"
                    >
                      <a
                        class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                        data-test-id="shipping-add-link"
                      >
                        Add Shipping Zones
                      </a>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        data-test-id="shipping-add-button"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Warehouses
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Select warehouses that will be used in this channel. You can assign warehouses to multiple channels.
            </div>
          </div>
          <div
            class="MuiPaper-root-id MuiAccordion-root-id Expander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          >
            <div
              class="AssignmentListHeader-container-id"
            >
              <div
                aria-disabled="false"
                aria-expanded="false"
                class="MuiButtonBase-root-id MuiAccordionSummary-root-id AssignmentListHeader-root-id"
                role="button"
                tabindex="0"
              >
                <div
                  class="MuiAccordionSummary-content-id AssignmentListHeader-content-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
                  >
                    2 / 0 warehouses
                  </div>
                </div>
                <div
                  aria-disabled="false"
                  aria-hidden="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      data-test-id="expand-icon"
                      fill="none"
                      height="7"
                      viewBox="0 0 10 7"
                      width="10"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M1 1L5 5L9 1"
                        stroke="#28234A"
                        stroke-opacity="0.4"
                        stroke-width="2"
                      />
                    </svg>
                  </span>
                </div>
              </div>
              <div
                class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
              />
            </div>
            <div
              class="MuiCollapse-container-id MuiCollapse-hidden-id"
              style="min-height:0px"
            >
              <div
                class="MuiCollapse-wrapper-id"
              >
                <div
                  class="MuiCollapse-wrapperInner-id"
                >
                  <div
                    role="region"
                  >
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="AssignmentList-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Warehouse 1
                      </div>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="AssignmentList-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Warehouse 2
                      </div>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="CardAddItemsFooter-container-id"
                    >
                      <a
                        class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                        data-test-id="warehouse-add-link"
                      >
                        Add Warehouses
                      </a>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        data-test-id="warehouse-add-button"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Channels / Channel details with data 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                General Information
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Channel name
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="name"
                  type="text"
                  value="Test"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                  >
                    <span>
                      Channel name
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Slug
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  name="slug"
                  type="text"
                  value="test"
                />
                <div
                  class="MuiInputAdornment-root-id ChannelComponents-copyBtn-id MuiInputAdornment-positionEnd-id"
                >
                  Copy
                </div>
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                  >
                    <span>
                      Slug
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Channel Settings
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              aria-expanded="false"
              aria-haspopup="listbox"
              aria-labelledby="downshift-9-label"
              class="SingleAutocompleteSelectField-container-id"
              data-test-id="channel-currency-select-input"
              role="combobox"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Currency
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-autocomplete="list"
                    aria-invalid="false"
                    aria-labelledby="downshift-9-label"
                    autocomplete="off"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    id="downshift-9-input"
                    type="text"
                    value=""
                  />
                  <div
                    aria-haspopup="true"
                    aria-label="open menu"
                    class="SingleAutocompleteSelectField-adornment-id"
                    data-toggle="true"
                    role="button"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                    </svg>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Currency
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              aria-expanded="false"
              aria-haspopup="listbox"
              aria-labelledby="downshift-10-label"
              class="SingleAutocompleteSelectField-container-id"
              data-test-id="country-select-input"
              role="combobox"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Default country
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-autocomplete="list"
                    aria-invalid="false"
                    aria-labelledby="downshift-10-label"
                    autocomplete="off"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    id="downshift-10-input"
                    type="text"
                    value="Poland"
                  />
                  <div
                    aria-haspopup="true"
                    aria-label="open menu"
                    class="SingleAutocompleteSelectField-adornment-id"
                    data-toggle="true"
                    role="button"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                    </svg>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Default country
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Channel Status
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id ChannelComponents-label-id MuiTypography-caption-id"
            >
              Status
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Active
            </div>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ChannelComponents-activeBtn-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Deactivate
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Shipping Zones
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Select shipping zones that will be supplied via this channel. You can assign shipping zones to multiple channels.
            </div>
          </div>
          <div
            class="MuiPaper-root-id MuiAccordion-root-id Expander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          >
            <div
              class="AssignmentListHeader-container-id"
            >
              <div
                aria-disabled="false"
                aria-expanded="false"
                class="MuiButtonBase-root-id MuiAccordionSummary-root-id AssignmentListHeader-root-id"
                role="button"
                tabindex="0"
              >
                <div
                  class="MuiAccordionSummary-content-id AssignmentListHeader-content-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
                  >
                    2 / 0 shipping zones
                  </div>
                </div>
                <div
                  aria-disabled="false"
                  aria-hidden="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      data-test-id="expand-icon"
                      fill="none"
                      height="7"
                      viewBox="0 0 10 7"
                      width="10"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M1 1L5 5L9 1"
                        stroke="#28234A"
                        stroke-opacity="0.4"
                        stroke-width="2"
                      />
                    </svg>
                  </span>
                </div>
              </div>
              <div
                class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
              />
            </div>
            <div
              class="MuiCollapse-container-id MuiCollapse-hidden-id"
              style="min-height:0px"
            >
              <div
                class="MuiCollapse-wrapper-id"
              >
                <div
                  class="MuiCollapse-wrapperInner-id"
                >
                  <div
                    role="region"
                  >
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="AssignmentList-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Europe
                      </div>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="AssignmentList-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        USA
                      </div>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="CardAddItemsFooter-container-id"
                    >
                      <a
                        class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                        data-test-id="shipping-add-link"
                      >
                        Add Shipping Zones
                      </a>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        data-test-id="shipping-add-button"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Warehouses
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Select warehouses that will be used in this channel. You can assign warehouses to multiple channels.
            </div>
          </div>
          <div
            class="MuiPaper-root-id MuiAccordion-root-id Expander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          >
            <div
              class="AssignmentListHeader-container-id"
            >
              <div
                aria-disabled="false"
                aria-expanded="false"
                class="MuiButtonBase-root-id MuiAccordionSummary-root-id AssignmentListHeader-root-id"
                role="button"
                tabindex="0"
              >
                <div
                  class="MuiAccordionSummary-content-id AssignmentListHeader-content-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
                  >
                    2 / 0 warehouses
                  </div>
                </div>
                <div
                  aria-disabled="false"
                  aria-hidden="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      data-test-id="expand-icon"
                      fill="none"
                      height="7"
                      viewBox="0 0 10 7"
                      width="10"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M1 1L5 5L9 1"
                        stroke="#28234A"
                        stroke-opacity="0.4"
                        stroke-width="2"
                      />
                    </svg>
                  </span>
                </div>
              </div>
              <div
                class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
              />
            </div>
            <div
              class="MuiCollapse-container-id MuiCollapse-hidden-id"
              style="min-height:0px"
            >
              <div
                class="MuiCollapse-wrapper-id"
              >
                <div
                  class="MuiCollapse-wrapperInner-id"
                >
                  <div
                    role="region"
                  >
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="AssignmentList-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Warehouse 1
                      </div>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="AssignmentList-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Warehouse 2
                      </div>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="CardAddItemsFooter-container-id"
                    >
                      <a
                        class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                        data-test-id="warehouse-add-link"
                      >
                        Add Warehouses
                      </a>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        data-test-id="warehouse-add-button"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Channels / Channel details with errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                General Information
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                data-shrink="false"
              >
                Channel name
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="name"
                  type="text"
                  value=""
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id"
                  >
                    <span>
                      Channel name
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                data-shrink="false"
              >
                Slug
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              >
                <input
                  aria-invalid="true"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  name="slug"
                  type="text"
                  value=""
                />
                <div
                  class="MuiInputAdornment-root-id ChannelComponents-copyBtn-id MuiInputAdornment-positionEnd-id"
                >
                  Copy
                </div>
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id"
                  >
                    <span>
                      Slug
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                data-test-id="slug-text-input-helper-text"
              >
                Slug must be unique
              </p>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Channel Settings
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              aria-expanded="false"
              aria-haspopup="listbox"
              aria-labelledby="downshift-12-label"
              class="SingleAutocompleteSelectField-container-id"
              data-test-id="channel-currency-select-input"
              role="combobox"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Currency
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-autocomplete="list"
                    aria-invalid="false"
                    aria-labelledby="downshift-12-label"
                    autocomplete="off"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    id="downshift-12-input"
                    type="text"
                    value=""
                  />
                  <div
                    aria-haspopup="true"
                    aria-label="open menu"
                    class="SingleAutocompleteSelectField-adornment-id"
                    data-toggle="true"
                    role="button"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                    </svg>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Currency
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              aria-expanded="false"
              aria-haspopup="listbox"
              aria-labelledby="downshift-13-label"
              class="SingleAutocompleteSelectField-container-id"
              data-test-id="country-select-input"
              role="combobox"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Default country
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-autocomplete="list"
                    aria-invalid="false"
                    aria-labelledby="downshift-13-label"
                    autocomplete="off"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    id="downshift-13-input"
                    type="text"
                    value=""
                  />
                  <div
                    aria-haspopup="true"
                    aria-label="open menu"
                    class="SingleAutocompleteSelectField-adornment-id"
                    data-toggle="true"
                    role="button"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                    </svg>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Default country
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Channel Status
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id ChannelComponents-label-id MuiTypography-caption-id"
            >
              Status
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Inactive
            </div>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ChannelComponents-activeBtn-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Activate
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Shipping Zones
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Select shipping zones that will be supplied via this channel. You can assign shipping zones to multiple channels.
            </div>
          </div>
          <div
            class="MuiPaper-root-id MuiAccordion-root-id Expander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          >
            <div
              class="AssignmentListHeader-container-id"
            >
              <div
                aria-disabled="false"
                aria-expanded="false"
                class="MuiButtonBase-root-id MuiAccordionSummary-root-id AssignmentListHeader-root-id"
                role="button"
                tabindex="0"
              >
                <div
                  class="MuiAccordionSummary-content-id AssignmentListHeader-content-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
                  >
                    2 / 0 shipping zones
                  </div>
                </div>
                <div
                  aria-disabled="false"
                  aria-hidden="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      data-test-id="expand-icon"
                      fill="none"
                      height="7"
                      viewBox="0 0 10 7"
                      width="10"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M1 1L5 5L9 1"
                        stroke="#28234A"
                        stroke-opacity="0.4"
                        stroke-width="2"
                      />
                    </svg>
                  </span>
                </div>
              </div>
              <div
                class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
              />
            </div>
            <div
              class="MuiCollapse-container-id MuiCollapse-hidden-id"
              style="min-height:0px"
            >
              <div
                class="MuiCollapse-wrapper-id"
              >
                <div
                  class="MuiCollapse-wrapperInner-id"
                >
                  <div
                    role="region"
                  >
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="AssignmentList-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Europe
                      </div>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="AssignmentList-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        USA
                      </div>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="CardAddItemsFooter-container-id"
                    >
                      <a
                        class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                        data-test-id="shipping-add-link"
                      >
                        Add Shipping Zones
                      </a>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        data-test-id="shipping-add-button"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Warehouses
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Select warehouses that will be used in this channel. You can assign warehouses to multiple channels.
            </div>
          </div>
          <div
            class="MuiPaper-root-id MuiAccordion-root-id Expander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          >
            <div
              class="AssignmentListHeader-container-id"
            >
              <div
                aria-disabled="false"
                aria-expanded="false"
                class="MuiButtonBase-root-id MuiAccordionSummary-root-id AssignmentListHeader-root-id"
                role="button"
                tabindex="0"
              >
                <div
                  class="MuiAccordionSummary-content-id AssignmentListHeader-content-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
                  >
                    2 / 0 warehouses
                  </div>
                </div>
                <div
                  aria-disabled="false"
                  aria-hidden="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      data-test-id="expand-icon"
                      fill="none"
                      height="7"
                      viewBox="0 0 10 7"
                      width="10"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M1 1L5 5L9 1"
                        stroke="#28234A"
                        stroke-opacity="0.4"
                        stroke-width="2"
                      />
                    </svg>
                  </span>
                </div>
              </div>
              <div
                class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
              />
            </div>
            <div
              class="MuiCollapse-container-id MuiCollapse-hidden-id"
              style="min-height:0px"
            >
              <div
                class="MuiCollapse-wrapper-id"
              >
                <div
                  class="MuiCollapse-wrapperInner-id"
                >
                  <div
                    role="region"
                  >
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="AssignmentList-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Warehouse 1
                      </div>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="AssignmentList-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Warehouse 2
                      </div>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="CardAddItemsFooter-container-id"
                    >
                      <a
                        class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                        data-test-id="warehouse-add-link"
                      >
                        Add Warehouses
                      </a>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        data-test-id="warehouse-add-button"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Channels / Channel details without editable currency code 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                General Information
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Channel name
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="name"
                  type="text"
                  value="Test"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                  >
                    <span>
                      Channel name
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Slug
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  name="slug"
                  type="text"
                  value="test"
                />
                <div
                  class="MuiInputAdornment-root-id ChannelComponents-copyBtn-id MuiInputAdornment-positionEnd-id"
                >
                  Copy
                </div>
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                  >
                    <span>
                      Slug
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Channel Settings
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id ChannelComponents-label-id MuiTypography-caption-id"
            >
              Selected currency
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              zl
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              aria-expanded="false"
              aria-haspopup="listbox"
              aria-labelledby="downshift-11-label"
              class="SingleAutocompleteSelectField-container-id"
              data-test-id="country-select-input"
              role="combobox"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Default country
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-autocomplete="list"
                    aria-invalid="false"
                    aria-labelledby="downshift-11-label"
                    autocomplete="off"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    id="downshift-11-input"
                    type="text"
                    value="Poland"
                  />
                  <div
                    aria-haspopup="true"
                    aria-label="open menu"
                    class="SingleAutocompleteSelectField-adornment-id"
                    data-toggle="true"
                    role="button"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                    </svg>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Default country
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Channel Status
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id ChannelComponents-label-id MuiTypography-caption-id"
            >
              Status
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Active
            </div>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ChannelComponents-activeBtn-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Deactivate
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Shipping Zones
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Select shipping zones that will be supplied via this channel. You can assign shipping zones to multiple channels.
            </div>
          </div>
          <div
            class="MuiPaper-root-id MuiAccordion-root-id Expander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          >
            <div
              class="AssignmentListHeader-container-id"
            >
              <div
                aria-disabled="false"
                aria-expanded="false"
                class="MuiButtonBase-root-id MuiAccordionSummary-root-id AssignmentListHeader-root-id"
                role="button"
                tabindex="0"
              >
                <div
                  class="MuiAccordionSummary-content-id AssignmentListHeader-content-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
                  >
                    2 / 0 shipping zones
                  </div>
                </div>
                <div
                  aria-disabled="false"
                  aria-hidden="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      data-test-id="expand-icon"
                      fill="none"
                      height="7"
                      viewBox="0 0 10 7"
                      width="10"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M1 1L5 5L9 1"
                        stroke="#28234A"
                        stroke-opacity="0.4"
                        stroke-width="2"
                      />
                    </svg>
                  </span>
                </div>
              </div>
              <div
                class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
              />
            </div>
            <div
              class="MuiCollapse-container-id MuiCollapse-hidden-id"
              style="min-height:0px"
            >
              <div
                class="MuiCollapse-wrapper-id"
              >
                <div
                  class="MuiCollapse-wrapperInner-id"
                >
                  <div
                    role="region"
                  >
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="AssignmentList-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Europe
                      </div>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="AssignmentList-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        USA
                      </div>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="CardAddItemsFooter-container-id"
                    >
                      <a
                        class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                        data-test-id="shipping-add-link"
                      >
                        Add Shipping Zones
                      </a>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        data-test-id="shipping-add-button"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Warehouses
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Select warehouses that will be used in this channel. You can assign warehouses to multiple channels.
            </div>
          </div>
          <div
            class="MuiPaper-root-id MuiAccordion-root-id Expander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          >
            <div
              class="AssignmentListHeader-container-id"
            >
              <div
                aria-disabled="false"
                aria-expanded="false"
                class="MuiButtonBase-root-id MuiAccordionSummary-root-id AssignmentListHeader-root-id"
                role="button"
                tabindex="0"
              >
                <div
                  class="MuiAccordionSummary-content-id AssignmentListHeader-content-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
                  >
                    2 / 0 warehouses
                  </div>
                </div>
                <div
                  aria-disabled="false"
                  aria-hidden="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      data-test-id="expand-icon"
                      fill="none"
                      height="7"
                      viewBox="0 0 10 7"
                      width="10"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M1 1L5 5L9 1"
                        stroke="#28234A"
                        stroke-opacity="0.4"
                        stroke-width="2"
                      />
                    </svg>
                  </span>
                </div>
              </div>
              <div
                class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
              />
            </div>
            <div
              class="MuiCollapse-container-id MuiCollapse-hidden-id"
              style="min-height:0px"
            >
              <div
                class="MuiCollapse-wrapper-id"
              >
                <div
                  class="MuiCollapse-wrapperInner-id"
                >
                  <div
                    role="region"
                  >
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="AssignmentList-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Warehouse 1
                      </div>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="AssignmentList-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Warehouse 2
                      </div>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="CardAddItemsFooter-container-id"
                    >
                      <a
                        class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                        data-test-id="warehouse-add-link"
                      >
                        Add Warehouses
                      </a>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        data-test-id="warehouse-add-button"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Channels / Channel form default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          General Information
        </span>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
      >
        <label
          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
          data-shrink="true"
        >
          Channel name
        </label>
        <div
          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
        >
          <input
            aria-invalid="false"
            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
            name="name"
            type="text"
            value="Test"
          />
          <fieldset
            aria-hidden="true"
            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
          >
            <legend
              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
            >
              <span>
                Channel name
              </span>
            </legend>
          </fieldset>
        </div>
      </div>
      <div
        class="FormSpacer-spacer-id"
      />
      <div
        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
      >
        <label
          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
          data-shrink="true"
        >
          Slug
        </label>
        <div
          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
        >
          <input
            aria-invalid="false"
            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
            name="slug"
            type="text"
            value="test"
          />
          <div
            class="MuiInputAdornment-root-id ChannelComponents-copyBtn-id MuiInputAdornment-positionEnd-id"
          >
            Copy
          </div>
          <fieldset
            aria-hidden="true"
            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
          >
            <legend
              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
            >
              <span>
                Slug
              </span>
            </legend>
          </fieldset>
        </div>
      </div>
      <div
        class="FormSpacer-spacer-id"
      />
    </div>
  </div>
  <div
    class="CardSpacer-spacer-id"
  />
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Channel Settings
        </span>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiTypography-root-id ChannelComponents-label-id MuiTypography-caption-id"
      >
        Selected currency
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        euro
      </div>
      <div
        class="FormSpacer-spacer-id"
      />
      <div
        aria-expanded="false"
        aria-haspopup="listbox"
        aria-labelledby="downshift-0-label"
        class="SingleAutocompleteSelectField-container-id"
        data-test-id="country-select-input"
        role="combobox"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
            data-shrink="false"
          >
            Default country
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
          >
            <input
              aria-autocomplete="list"
              aria-invalid="false"
              aria-labelledby="downshift-0-label"
              autocomplete="off"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
              id="downshift-0-input"
              type="text"
              value="Poland"
            />
            <div
              aria-haspopup="true"
              aria-label="open menu"
              class="SingleAutocompleteSelectField-adornment-id"
              data-toggle="true"
              role="button"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MacawIcon-root-id"
                fill="none"
                focusable="false"
                height="24"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m8 10 4 4 4-4"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="1.5"
                />
              </svg>
            </div>
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id"
              >
                <span>
                  Default country
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Channels / Channel form disabled 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          General Information
        </span>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
      >
        <label
          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
          data-shrink="true"
        >
          Channel name
        </label>
        <div
          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
        >
          <input
            aria-invalid="false"
            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
            disabled=""
            name="name"
            type="text"
            value="Test"
          />
          <fieldset
            aria-hidden="true"
            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
          >
            <legend
              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
            >
              <span>
                Channel name
              </span>
            </legend>
          </fieldset>
        </div>
      </div>
      <div
        class="FormSpacer-spacer-id"
      />
      <div
        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
      >
        <label
          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
          data-shrink="true"
        >
          Slug
        </label>
        <div
          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
        >
          <input
            aria-invalid="false"
            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
            disabled=""
            name="slug"
            type="text"
            value="test"
          />
          <div
            class="MuiInputAdornment-root-id ChannelComponents-copyBtn-id MuiInputAdornment-positionEnd-id"
          >
            Copy
          </div>
          <fieldset
            aria-hidden="true"
            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
          >
            <legend
              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
            >
              <span>
                Slug
              </span>
            </legend>
          </fieldset>
        </div>
      </div>
      <div
        class="FormSpacer-spacer-id"
      />
    </div>
  </div>
  <div
    class="CardSpacer-spacer-id"
  />
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Channel Settings
        </span>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiTypography-root-id ChannelComponents-label-id MuiTypography-caption-id"
      >
        Selected currency
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        euro
      </div>
      <div
        class="FormSpacer-spacer-id"
      />
      <div
        aria-expanded="false"
        aria-haspopup="listbox"
        aria-labelledby="downshift-1-label"
        class="SingleAutocompleteSelectField-container-id"
        data-test-id="country-select-input"
        role="combobox"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
            data-shrink="false"
          >
            Default country
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
          >
            <input
              aria-autocomplete="list"
              aria-invalid="false"
              aria-labelledby="downshift-1-label"
              autocomplete="off"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
              disabled=""
              id="downshift-1-input"
              type="text"
              value="Poland"
            />
            <div
              aria-haspopup="true"
              aria-label="open menu"
              class="SingleAutocompleteSelectField-adornment-id"
              data-toggle="true"
              role="button"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MacawIcon-root-id"
                fill="none"
                focusable="false"
                height="24"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m8 10 4 4 4-4"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="1.5"
                />
              </svg>
            </div>
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id"
              >
                <span>
                  Default country
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Channels / Channel form with errors 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          General Information
        </span>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
      >
        <label
          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
          data-shrink="true"
        >
          Channel name
        </label>
        <div
          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
        >
          <input
            aria-invalid="false"
            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
            name="name"
            type="text"
            value="Test"
          />
          <fieldset
            aria-hidden="true"
            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
          >
            <legend
              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
            >
              <span>
                Channel name
              </span>
            </legend>
          </fieldset>
        </div>
      </div>
      <div
        class="FormSpacer-spacer-id"
      />
      <div
        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
      >
        <label
          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
          data-shrink="true"
        >
          Slug
        </label>
        <div
          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
        >
          <input
            aria-invalid="true"
            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
            name="slug"
            type="text"
            value="test"
          />
          <div
            class="MuiInputAdornment-root-id ChannelComponents-copyBtn-id MuiInputAdornment-positionEnd-id"
          >
            Copy
          </div>
          <fieldset
            aria-hidden="true"
            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
          >
            <legend
              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
            >
              <span>
                Slug
              </span>
            </legend>
          </fieldset>
        </div>
        <p
          class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
          data-test-id="slug-text-input-helper-text"
        >
          Slug must be unique
        </p>
      </div>
      <div
        class="FormSpacer-spacer-id"
      />
    </div>
  </div>
  <div
    class="CardSpacer-spacer-id"
  />
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Channel Settings
        </span>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiTypography-root-id ChannelComponents-label-id MuiTypography-caption-id"
      >
        Selected currency
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        euro
      </div>
      <div
        class="FormSpacer-spacer-id"
      />
      <div
        aria-expanded="false"
        aria-haspopup="listbox"
        aria-labelledby="downshift-2-label"
        class="SingleAutocompleteSelectField-container-id"
        data-test-id="country-select-input"
        role="combobox"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
            data-shrink="false"
          >
            Default country
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
          >
            <input
              aria-autocomplete="list"
              aria-invalid="false"
              aria-labelledby="downshift-2-label"
              autocomplete="off"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
              id="downshift-2-input"
              type="text"
              value="Poland"
            />
            <div
              aria-haspopup="true"
              aria-label="open menu"
              class="SingleAutocompleteSelectField-adornment-id"
              data-toggle="true"
              role="button"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MacawIcon-root-id"
                fill="none"
                focusable="false"
                height="24"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m8 10 4 4 4-4"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="1.5"
                />
              </svg>
            </div>
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id"
              >
                <span>
                  Default country
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Channels / Channel status active 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Channel Status
        </span>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiTypography-root-id ChannelComponents-label-id MuiTypography-caption-id"
      >
        Status
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        Active
      </div>
      <button
        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ChannelComponents-activeBtn-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
        tabindex="0"
        type="button"
      >
        <span
          class="MuiButton-label-id"
        >
          Deactivate
        </span>
      </button>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Channels / Channel status inactive 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Channel Status
        </span>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiTypography-root-id ChannelComponents-label-id MuiTypography-caption-id"
      >
        Status
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        Inactive
      </div>
      <button
        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ChannelComponents-activeBtn-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
        tabindex="0"
        type="button"
      >
        <span
          class="MuiButton-label-id"
        >
          Activate
        </span>
      </button>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Channels / Channels list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Channels
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            2/5 channels used
          </div>
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="add-channel"
            href="/channels/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Channel
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="ResponsiveTable-root-id"
      >
        <a
          class="TableRowLink-link-id"
          href="/channels/Q2hhbm5lcDoy"
        />
        <a
          class="TableRowLink-link-id"
          href="/channels/Q2hhbm7lbDoy213"
        />
        <a
          class="TableRowLink-link-id"
          href="/channels/Q2hhbn5lbDoytr"
        />
        <a
          class="TableRowLink-link-id"
          href="/channels/Q2hhbm5lbDo5bot"
        />
        <a
          class="TableRowLink-link-id"
          href="/channels/Q2hhbm7lbDoyr0tr"
        />
        <a
          class="TableRowLink-link-id"
          href="/channels/Q2hhbn5lbDoyya"
        />
        <a
          class="TableRowLink-link-id"
          href="/channels/Q2hhbm5lbDo5w0z"
        />
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id TableCellHeader-notSortable-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Channel Name
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id ChannelsListPage-colRight-id"
                scope="col"
              >
                Actions
              </th>
            </tr>
          </thead>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  Test
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  Channel
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  Channel test
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  Channel USD
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  Channel
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  Channel test
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  Channel USD
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Channels / Channels list empty 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Channels
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            2/5 channels used
          </div>
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="add-channel"
            href="/channels/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Channel
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id TableCellHeader-notSortable-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Channel Name
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id ChannelsListPage-colRight-id"
                scope="col"
              >
                Actions
              </th>
            </tr>
          </thead>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
                colspan="2"
              >
                No channels found
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Channels / Channels list limits reached 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Channels
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            5/5 channels used
          </div>
          <a
            aria-disabled="true"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
            data-test-id="add-channel"
            href="/channels/add"
            role="button"
            tabindex="-1"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Channel
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id LimitReachedAlert-root-id Alert-root-id Alert-warning-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      data-test="alert"
    >
      <div
        class="MuiCardContent-root-id"
      >
        <div
          class="Alert-container-id"
        >
          <div
            class="Alert-icon-id"
          >
            <svg
              class="Alert-warning-id"
              fill="none"
              height="40"
              viewBox="0 0 40 40"
              width="40"
              xmlns="http://www.w3.org/2000/svg"
            >
              <circle
                cx="20"
                cy="20"
                fill="var(--background-paper)"
                r="20"
              />
              <circle
                cx="20"
                cy="20"
                r="14"
                stroke="currentColor"
                stroke-width="4"
              />
              <path
                clip-rule="evenodd"
                d="M19.5 11C18.6716 11 18 11.6716 18 12.5V20.5C18 21.3284 18.6716 22 19.5 22H20.5C21.3284 22 22 21.3284 22 20.5V12.5C22 11.6716 21.3284 11 20.5 11H19.5ZM19.5 25C18.6716 25 18 25.6716 18 26.5V27.5C18 28.3284 18.6716 29 19.5 29H20.5C21.3284 29 22 28.3284 22 27.5V26.5C22 25.6716 21.3284 25 20.5 25H19.5Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
          </div>
          <div
            class="Alert-content-id"
          >
            <div
              class="Alert-titleBar-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-h5-id"
              >
                Channel limit reached
              </div>
              <button
                class="MuiButtonBase-root-id IconButton-secondary-id Alert-close-id"
                data-test="close"
                tabindex="0"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="25"
                  viewBox="0 0 24 25"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    clip-rule="evenodd"
                    d="M7.53 6.472a.75.75 0 1 0-1.06 1.06l4.47 4.47-4.47 4.47a.75.75 0 0 0 1.06 1.06l4.47-4.47 4.47 4.47a.75.75 0 1 0 1.06-1.06l-4.47-4.47 4.47-4.47a.75.75 0 0 0-1.06-1.06L12 10.942l-4.47-4.47Z"
                    fill="currentColor"
                    fill-rule="evenodd"
                  />
                </svg>
              </button>
            </div>
            You have reached your channel limit, you will be no longer able to add channels to your store. If you would like to up your limit, contact your administration staff about raising your limits.
          </div>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="ResponsiveTable-root-id"
      >
        <a
          class="TableRowLink-link-id"
          href="/channels/Q2hhbm5lcDoy"
        />
        <a
          class="TableRowLink-link-id"
          href="/channels/Q2hhbm7lbDoy213"
        />
        <a
          class="TableRowLink-link-id"
          href="/channels/Q2hhbn5lbDoytr"
        />
        <a
          class="TableRowLink-link-id"
          href="/channels/Q2hhbm5lbDo5bot"
        />
        <a
          class="TableRowLink-link-id"
          href="/channels/Q2hhbm7lbDoyr0tr"
        />
        <a
          class="TableRowLink-link-id"
          href="/channels/Q2hhbn5lbDoyya"
        />
        <a
          class="TableRowLink-link-id"
          href="/channels/Q2hhbm5lbDo5w0z"
        />
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id TableCellHeader-notSortable-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Channel Name
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id ChannelsListPage-colRight-id"
                scope="col"
              >
                Actions
              </th>
            </tr>
          </thead>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  Test
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  Channel
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  Channel test
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  Channel USD
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  Channel
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  Channel test
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  Channel USD
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Channels / Channels list no limits 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Channels
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="add-channel"
            href="/channels/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Channel
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="ResponsiveTable-root-id"
      >
        <a
          class="TableRowLink-link-id"
          href="/channels/Q2hhbm5lcDoy"
        />
        <a
          class="TableRowLink-link-id"
          href="/channels/Q2hhbm7lbDoy213"
        />
        <a
          class="TableRowLink-link-id"
          href="/channels/Q2hhbn5lbDoytr"
        />
        <a
          class="TableRowLink-link-id"
          href="/channels/Q2hhbm5lbDo5bot"
        />
        <a
          class="TableRowLink-link-id"
          href="/channels/Q2hhbm7lbDoyr0tr"
        />
        <a
          class="TableRowLink-link-id"
          href="/channels/Q2hhbn5lbDoyya"
        />
        <a
          class="TableRowLink-link-id"
          href="/channels/Q2hhbm5lbDo5w0z"
        />
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id TableCellHeader-notSortable-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Channel Name
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id ChannelsListPage-colRight-id"
                scope="col"
              >
                Actions
              </th>
            </tr>
          </thead>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  Test
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  Channel
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  Channel test
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  Channel USD
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  Channel
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  Channel test
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  Channel USD
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Channels / Delete channel default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Views / Channels / Delete channel without channels to choose 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Views / Channels / Settings dialog default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Views / Collections / Collection detailsCollection details default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Summer collection
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Summer collection"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-description"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Description
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                />
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Background Image (optional)
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload image
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="CollectionImage-fileField-id"
                  id="fileUpload"
                  type="file"
                />
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MediaTile-mediaContainer-id"
                data-test-id="product-image"
              >
                <div
                  class="MediaTile-mediaOverlay-id"
                >
                  <div
                    class="MediaTile-mediaOverlayToolbar-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
                <img
                  alt="Alt text"
                  class="MediaTile-media-id"
                  src="block1.jpg"
                />
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Description
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    name="backgroundImageAlt"
                    rows="1"
                  >
                    Alt text
                  </textarea>
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Description
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                >
                  (Optional)
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.id"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          100023123
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Products in Summer collection
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="add-product"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign product
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <a
                class="TableRowLink-link-id"
                href="/products/UHJvZHVjdDoxNw%3D%3D"
              />
              <a
                class="TableRowLink-link-id"
                href="/products/UHJvZHVjdDoyNw%3D%3D"
              />
              <a
                class="TableRowLink-link-id"
                href="/products/UHJvZHVjdDoyOQ%3D%3D"
              />
              <a
                class="TableRowLink-link-id"
                href="/products/UHJvZHVjdDo1Mw%3D%3D"
              />
              <table
                class="MuiTable-root-id CollectionProducts-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                      scope="col"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colName-id"
                      scope="col"
                    >
                      <span
                        class="CollectionProducts-colNameLabel-id"
                      >
                        Name
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colType-id"
                      scope="col"
                    >
                      Type
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colPublished-id"
                      scope="col"
                    >
                      Availability
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colActions-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tfoot
                  class="MuiTableFooter-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id"
                      colspan="5"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                      >
                        <div
                          class="Pagination-spacer-id"
                        />
                        <div
                          class="Pagination-actions-id"
                        >
                          <button
                            aria-label="previous page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                              />
                            </svg>
                          </button>
                          <button
                            aria-label="next page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-next"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                              />
                            </svg>
                          </button>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tfoot>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id CollectionProducts-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Murray Inc
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
                    >
                      Mugs
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
                    >
                      <div>
                        <div
                          aria-controls="availability-menu"
                          aria-haspopup="true"
                          role="button"
                        >
                          <div
                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
                          >
                            <span
                              class="MuiChip-label-id Pill-label-id"
                            >
                              2 Channels
                            </span>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        data-test-id="delete-icon"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CollectionProducts-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Williams-Taylor
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
                    >
                      Coffee
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
                    >
                      <div>
                        <div
                          aria-controls="availability-menu"
                          aria-haspopup="true"
                          role="button"
                        >
                          <div
                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
                          >
                            <span
                              class="MuiChip-label-id Pill-label-id"
                            >
                              2 Channels
                            </span>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        data-test-id="delete-icon"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CollectionProducts-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Hebert-Sherman
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
                    >
                      Coffee
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
                    >
                      <div>
                        <div
                          aria-controls="availability-menu"
                          aria-haspopup="true"
                          role="button"
                        >
                          <div
                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
                          >
                            <span
                              class="MuiChip-label-id Pill-label-id"
                            >
                              2 Channels
                            </span>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        data-test-id="delete-icon"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CollectionProducts-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Estes, Johnson and Graham
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
                    >
                      Books
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
                    >
                      <div>
                        <div
                          aria-controls="availability-menu"
                          aria-haspopup="true"
                          role="button"
                        >
                          <div
                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
                          >
                            <span
                              class="MuiChip-label-id Pill-label-id"
                            >
                              2 Channels
                            </span>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        data-test-id="delete-icon"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Search Engine Preview
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this collection easier to find
              </div>
            </div>
          </div>
        </div>
        <div>
          <div>
            <div
              class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            >
              <div
                class="MuiCardHeader-root-id"
              >
                <div
                  class="MuiCardHeader-content-id"
                >
                  <span
                    class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                  >
                    Availability
                  </span>
                </div>
                <div
                  class="MuiCardHeader-action-id"
                />
              </div>
              <div
                class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
              >
                <div
                  class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
                >
                  Available at 1 out of 2 channels
                </div>
                <hr
                  class="Hr-root-id ChannelsAvailabilityCard-hr-id"
                />
                <div
                  class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                  data-test-id="channel-availability-item"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel
                      </div>
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      />
                    </div>
                    <div
                      aria-disabled="false"
                      aria-hidden="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          data-test-id="expand-icon"
                          fill="none"
                          height="7"
                          viewBox="0 0 10 7"
                          width="10"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M1 1L5 5L9 1"
                            stroke="#28234A"
                            stroke-opacity="0.4"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </div>
                  </div>
                  <div
                    class="MuiCollapse-container-id MuiCollapse-hidden-id"
                    style="min-height:0px"
                  >
                    <div
                      class="MuiCollapse-wrapper-id"
                    >
                      <div
                        class="MuiCollapse-wrapperInner-id"
                      >
                        <div
                          role="region"
                        >
                          <div
                            class="ChannelsAvailabilityCard-container-id"
                          >
                            <div
                              class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                            >
                              <div
                                aria-label="isPublished"
                                class="MuiFormGroup-root-id"
                                role="radiogroup"
                              >
                                <label
                                  class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                                >
                                  <span
                                    aria-disabled="false"
                                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                                  >
                                    <span
                                      class="MuiIconButton-label-id"
                                    >
                                      <input
                                        class="PrivateSwitchBase-input-id"
                                        name="isPublished"
                                        type="radio"
                                        value="true"
                                      />
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <circle
                                          cx="12"
                                          cy="12"
                                          fill="var(--background-paper)"
                                          r="11"
                                          stroke="currentColor"
                                          stroke-width="2"
                                        />
                                      </svg>
                                    </span>
                                  </span>
                                  <span
                                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                  >
                                    <p
                                      class="ChannelsAvailabilityCard-label-id"
                                    >
                                      Visible
                                    </p>
                                  </span>
                                </label>
                                <label
                                  class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                                >
                                  <span
                                    aria-disabled="false"
                                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                                  >
                                    <span
                                      class="MuiIconButton-label-id"
                                    >
                                      <input
                                        checked=""
                                        class="PrivateSwitchBase-input-id"
                                        name="isPublished"
                                        type="radio"
                                        value="false"
                                      />
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <circle
                                          cx="12"
                                          cy="12"
                                          fill="currentColor"
                                          r="12"
                                        />
                                        <circle
                                          cx="12"
                                          cy="12"
                                          fill="var(--background-paper)"
                                          r="5"
                                        />
                                      </svg>
                                    </span>
                                  </span>
                                  <span
                                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                  >
                                    <p
                                      class="ChannelsAvailabilityCard-label-id"
                                    >
                                      Hidden
                                    </p>
                                  </span>
                                </label>
                              </div>
                            </div>
                            <div
                              class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
                            >
                              Set publication date
                            </div>
                            <div
                              class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
                            >
                              <label
                                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                                data-shrink="true"
                              >
                                Publish on
                              </label>
                              <div
                                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                              >
                                <input
                                  aria-invalid="false"
                                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                                  name="channel:publicationDate:223"
                                  type="date"
                                  value=""
                                />
                                <fieldset
                                  aria-hidden="true"
                                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                                >
                                  <legend
                                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                  >
                                    <span>
                                      Publish on
                                    </span>
                                  </legend>
                                </fieldset>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Collections / Collection detailsCollection details form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Summer collection
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Summer collection"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  This field is required
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-description"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Description
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  This field is required
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Background Image (optional)
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload image
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="CollectionImage-fileField-id"
                  id="fileUpload"
                  type="file"
                />
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MediaTile-mediaContainer-id"
                data-test-id="product-image"
              >
                <div
                  class="MediaTile-mediaOverlay-id"
                >
                  <div
                    class="MediaTile-mediaOverlayToolbar-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
                <img
                  alt="Alt text"
                  class="MediaTile-media-id"
                  src="block1.jpg"
                />
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Description
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    name="backgroundImageAlt"
                    rows="1"
                  >
                    Alt text
                  </textarea>
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Description
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                >
                  (Optional)
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.id"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          100023123
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Products in Summer collection
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="add-product"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign product
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <a
                class="TableRowLink-link-id"
                href="/products/UHJvZHVjdDoxNw%3D%3D"
              />
              <a
                class="TableRowLink-link-id"
                href="/products/UHJvZHVjdDoyNw%3D%3D"
              />
              <a
                class="TableRowLink-link-id"
                href="/products/UHJvZHVjdDoyOQ%3D%3D"
              />
              <a
                class="TableRowLink-link-id"
                href="/products/UHJvZHVjdDo1Mw%3D%3D"
              />
              <table
                class="MuiTable-root-id CollectionProducts-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                      scope="col"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colName-id"
                      scope="col"
                    >
                      <span
                        class="CollectionProducts-colNameLabel-id"
                      >
                        Name
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colType-id"
                      scope="col"
                    >
                      Type
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colPublished-id"
                      scope="col"
                    >
                      Availability
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colActions-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tfoot
                  class="MuiTableFooter-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id"
                      colspan="5"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                      >
                        <div
                          class="Pagination-spacer-id"
                        />
                        <div
                          class="Pagination-actions-id"
                        >
                          <button
                            aria-label="previous page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                              />
                            </svg>
                          </button>
                          <button
                            aria-label="next page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-next"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                              />
                            </svg>
                          </button>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tfoot>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id CollectionProducts-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Murray Inc
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
                    >
                      Mugs
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
                    >
                      <div>
                        <div
                          aria-controls="availability-menu"
                          aria-haspopup="true"
                          role="button"
                        >
                          <div
                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
                          >
                            <span
                              class="MuiChip-label-id Pill-label-id"
                            >
                              2 Channels
                            </span>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        data-test-id="delete-icon"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CollectionProducts-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Williams-Taylor
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
                    >
                      Coffee
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
                    >
                      <div>
                        <div
                          aria-controls="availability-menu"
                          aria-haspopup="true"
                          role="button"
                        >
                          <div
                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
                          >
                            <span
                              class="MuiChip-label-id Pill-label-id"
                            >
                              2 Channels
                            </span>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        data-test-id="delete-icon"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CollectionProducts-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Hebert-Sherman
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
                    >
                      Coffee
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
                    >
                      <div>
                        <div
                          aria-controls="availability-menu"
                          aria-haspopup="true"
                          role="button"
                        >
                          <div
                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
                          >
                            <span
                              class="MuiChip-label-id Pill-label-id"
                            >
                              2 Channels
                            </span>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        data-test-id="delete-icon"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CollectionProducts-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Estes, Johnson and Graham
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
                    >
                      Books
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
                    >
                      <div>
                        <div
                          aria-controls="availability-menu"
                          aria-haspopup="true"
                          role="button"
                        >
                          <div
                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
                          >
                            <span
                              class="MuiChip-label-id Pill-label-id"
                            >
                              2 Channels
                            </span>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        data-test-id="delete-icon"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Search Engine Preview
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this collection easier to find
              </div>
            </div>
          </div>
        </div>
        <div>
          <div>
            <div
              class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            >
              <div
                class="MuiCardHeader-root-id"
              >
                <div
                  class="MuiCardHeader-content-id"
                >
                  <span
                    class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                  >
                    Availability
                  </span>
                </div>
                <div
                  class="MuiCardHeader-action-id"
                />
              </div>
              <div
                class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
              >
                <div
                  class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
                >
                  Available at 1 out of 2 channels
                </div>
                <hr
                  class="Hr-root-id ChannelsAvailabilityCard-hr-id"
                />
                <div
                  class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                  data-test-id="channel-availability-item"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel
                      </div>
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      />
                    </div>
                    <div
                      aria-disabled="false"
                      aria-hidden="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          data-test-id="expand-icon"
                          fill="none"
                          height="7"
                          viewBox="0 0 10 7"
                          width="10"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M1 1L5 5L9 1"
                            stroke="#28234A"
                            stroke-opacity="0.4"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </div>
                  </div>
                  <div
                    class="MuiCollapse-container-id MuiCollapse-hidden-id"
                    style="min-height:0px"
                  >
                    <div
                      class="MuiCollapse-wrapper-id"
                    >
                      <div
                        class="MuiCollapse-wrapperInner-id"
                      >
                        <div
                          role="region"
                        >
                          <div
                            class="ChannelsAvailabilityCard-container-id"
                          >
                            <div
                              class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                            >
                              <div
                                aria-label="isPublished"
                                class="MuiFormGroup-root-id"
                                role="radiogroup"
                              >
                                <label
                                  class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                                >
                                  <span
                                    aria-disabled="false"
                                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                                  >
                                    <span
                                      class="MuiIconButton-label-id"
                                    >
                                      <input
                                        class="PrivateSwitchBase-input-id"
                                        name="isPublished"
                                        type="radio"
                                        value="true"
                                      />
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <circle
                                          cx="12"
                                          cy="12"
                                          fill="var(--background-paper)"
                                          r="11"
                                          stroke="currentColor"
                                          stroke-width="2"
                                        />
                                      </svg>
                                    </span>
                                  </span>
                                  <span
                                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                  >
                                    <p
                                      class="ChannelsAvailabilityCard-label-id"
                                    >
                                      Visible
                                    </p>
                                  </span>
                                </label>
                                <label
                                  class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                                >
                                  <span
                                    aria-disabled="false"
                                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                                  >
                                    <span
                                      class="MuiIconButton-label-id"
                                    >
                                      <input
                                        checked=""
                                        class="PrivateSwitchBase-input-id"
                                        name="isPublished"
                                        type="radio"
                                        value="false"
                                      />
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <circle
                                          cx="12"
                                          cy="12"
                                          fill="currentColor"
                                          r="12"
                                        />
                                        <circle
                                          cx="12"
                                          cy="12"
                                          fill="var(--background-paper)"
                                          r="5"
                                        />
                                      </svg>
                                    </span>
                                  </span>
                                  <span
                                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                  >
                                    <p
                                      class="ChannelsAvailabilityCard-label-id"
                                    >
                                      Hidden
                                    </p>
                                  </span>
                                </label>
                              </div>
                            </div>
                            <div
                              class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
                            >
                              Set publication date
                            </div>
                            <div
                              class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
                            >
                              <label
                                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                                data-shrink="true"
                              >
                                Publish on
                              </label>
                              <div
                                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                              >
                                <input
                                  aria-invalid="false"
                                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                                  name="channel:publicationDate:223"
                                  type="date"
                                  value=""
                                />
                                <fieldset
                                  aria-hidden="true"
                                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                                >
                                  <legend
                                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                  >
                                    <span>
                                      Publish on
                                    </span>
                                  </legend>
                                </fieldset>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Collections / Collection detailsCollection details loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
              style="width:10em"
            >
              ‌
            </span>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-description"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Description
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
                />
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Background Image (optional)
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload image
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="CollectionImage-fileField-id"
                  id="fileUpload"
                  type="file"
                />
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div>
                <div
                  class="CollectionImage-imageContainer-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                    data-test-id="skeleton"
                  >
                    ‌
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                    data-test-id="skeleton"
                  >
                    ‌
                  </span>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  data-test-id="add-product"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign product
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id CollectionProducts-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                      scope="col"
                    >
                      <span
                        aria-disabled="true"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        tabindex="-1"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            disabled=""
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colName-id"
                      scope="col"
                    >
                      <span
                        class="CollectionProducts-colNameLabel-id"
                      >
                        Name
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colType-id"
                      scope="col"
                    >
                      Type
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colPublished-id"
                      scope="col"
                    >
                      Availability
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colActions-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tfoot
                  class="MuiTableFooter-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id"
                      colspan="5"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                      >
                        <div
                          class="Pagination-spacer-id"
                        />
                        <div
                          class="Pagination-actions-id"
                        >
                          <button
                            aria-label="previous page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                              />
                            </svg>
                          </button>
                          <button
                            aria-label="next page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-next"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                              />
                            </svg>
                          </button>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tfoot>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id CollectionProducts-tableRow-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="true"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        tabindex="-1"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            disabled=""
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
                      data-test-id="table-cell-avatar"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              clip-rule="evenodd"
                              d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
                              fill="currentColor"
                              fill-rule="evenodd"
                            />
                          </svg>
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          <span
                            class="Skeleton-skeleton-id"
                            data-test-id="skeleton"
                          >
                            ‌
                          </span>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
                        data-test-id="delete-icon"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Search Engine Preview
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this collection easier to find
              </div>
            </div>
          </div>
        </div>
        <div>
          <div>
            <div
              class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            >
              <div
                class="MuiCardHeader-root-id"
              >
                <div
                  class="MuiCardHeader-content-id"
                >
                  <span
                    class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                  >
                    Availability
                  </span>
                </div>
                <div
                  class="MuiCardHeader-action-id"
                />
              </div>
              <div
                class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
              >
                <div
                  class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
                >
                  Available at 1 out of 2 channels
                </div>
                <hr
                  class="Hr-root-id ChannelsAvailabilityCard-hr-id"
                />
                <div
                  class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                  data-test-id="channel-availability-item"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel
                      </div>
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      />
                    </div>
                    <div
                      aria-disabled="false"
                      aria-hidden="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          data-test-id="expand-icon"
                          fill="none"
                          height="7"
                          viewBox="0 0 10 7"
                          width="10"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M1 1L5 5L9 1"
                            stroke="#28234A"
                            stroke-opacity="0.4"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </div>
                  </div>
                  <div
                    class="MuiCollapse-container-id MuiCollapse-hidden-id"
                    style="min-height:0px"
                  >
                    <div
                      class="MuiCollapse-wrapper-id"
                    >
                      <div
                        class="MuiCollapse-wrapperInner-id"
                      >
                        <div
                          role="region"
                        >
                          <div
                            class="ChannelsAvailabilityCard-container-id"
                          >
                            <div
                              class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                            >
                              <div
                                aria-label="isPublished"
                                class="MuiFormGroup-root-id"
                                role="radiogroup"
                              >
                                <label
                                  class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                                >
                                  <span
                                    aria-disabled="false"
                                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                                  >
                                    <span
                                      class="MuiIconButton-label-id"
                                    >
                                      <input
                                        class="PrivateSwitchBase-input-id"
                                        name="isPublished"
                                        type="radio"
                                        value="true"
                                      />
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <circle
                                          cx="12"
                                          cy="12"
                                          fill="var(--background-paper)"
                                          r="11"
                                          stroke="currentColor"
                                          stroke-width="2"
                                        />
                                      </svg>
                                    </span>
                                  </span>
                                  <span
                                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                  >
                                    <p
                                      class="ChannelsAvailabilityCard-label-id"
                                    >
                                      Visible
                                    </p>
                                  </span>
                                </label>
                                <label
                                  class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                                >
                                  <span
                                    aria-disabled="false"
                                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                                  >
                                    <span
                                      class="MuiIconButton-label-id"
                                    >
                                      <input
                                        checked=""
                                        class="PrivateSwitchBase-input-id"
                                        name="isPublished"
                                        type="radio"
                                        value="false"
                                      />
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <circle
                                          cx="12"
                                          cy="12"
                                          fill="currentColor"
                                          r="12"
                                        />
                                        <circle
                                          cx="12"
                                          cy="12"
                                          fill="var(--background-paper)"
                                          r="5"
                                        />
                                      </svg>
                                    </span>
                                  </span>
                                  <span
                                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                  >
                                    <p
                                      class="ChannelsAvailabilityCard-label-id"
                                    >
                                      Hidden
                                    </p>
                                  </span>
                                </label>
                              </div>
                            </div>
                            <div
                              class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
                            >
                              Set publication date
                            </div>
                            <div
                              class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
                            >
                              <label
                                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                                data-shrink="true"
                              >
                                Publish on
                              </label>
                              <div
                                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                              >
                                <input
                                  aria-invalid="false"
                                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                                  name="channel:publicationDate:223"
                                  type="date"
                                  value=""
                                />
                                <fieldset
                                  aria-hidden="true"
                                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                                >
                                  <legend
                                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                  >
                                    <span>
                                      Publish on
                                    </span>
                                  </legend>
                                </fieldset>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Collections / Collection detailsCollection details no products 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Summer collection
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Summer collection"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-description"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Description
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                />
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Background Image (optional)
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload image
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="CollectionImage-fileField-id"
                  id="fileUpload"
                  type="file"
                />
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MediaTile-mediaContainer-id"
                data-test-id="product-image"
              >
                <div
                  class="MediaTile-mediaOverlay-id"
                >
                  <div
                    class="MediaTile-mediaOverlayToolbar-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
                <img
                  alt="Alt text"
                  class="MediaTile-media-id"
                  src="block1.jpg"
                />
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Description
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    name="backgroundImageAlt"
                    rows="1"
                  >
                    Alt text
                  </textarea>
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Description
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                >
                  (Optional)
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.id"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          100023123
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Products in Summer collection
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="add-product"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign product
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id CollectionProducts-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colName-id"
                      scope="col"
                    >
                      <span
                        class="CollectionProducts-colNameLabel-id"
                      >
                        Name
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colType-id"
                      scope="col"
                    >
                      Type
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colPublished-id"
                      scope="col"
                    >
                      Availability
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colActions-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tfoot
                  class="MuiTableFooter-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id"
                      colspan="4"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                      >
                        <div
                          class="Pagination-spacer-id"
                        />
                        <div
                          class="Pagination-actions-id"
                        >
                          <button
                            aria-label="previous page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                              />
                            </svg>
                          </button>
                          <button
                            aria-label="next page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-next"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                              />
                            </svg>
                          </button>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tfoot>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                      colspan="4"
                    >
                      No products found
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Search Engine Preview
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this collection easier to find
              </div>
            </div>
          </div>
        </div>
        <div>
          <div>
            <div
              class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            >
              <div
                class="MuiCardHeader-root-id"
              >
                <div
                  class="MuiCardHeader-content-id"
                >
                  <span
                    class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                  >
                    Availability
                  </span>
                </div>
                <div
                  class="MuiCardHeader-action-id"
                />
              </div>
              <div
                class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
              >
                <div
                  class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
                >
                  Available at 1 out of 2 channels
                </div>
                <hr
                  class="Hr-root-id ChannelsAvailabilityCard-hr-id"
                />
                <div
                  class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                  data-test-id="channel-availability-item"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel
                      </div>
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      />
                    </div>
                    <div
                      aria-disabled="false"
                      aria-hidden="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          data-test-id="expand-icon"
                          fill="none"
                          height="7"
                          viewBox="0 0 10 7"
                          width="10"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M1 1L5 5L9 1"
                            stroke="#28234A"
                            stroke-opacity="0.4"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </div>
                  </div>
                  <div
                    class="MuiCollapse-container-id MuiCollapse-hidden-id"
                    style="min-height:0px"
                  >
                    <div
                      class="MuiCollapse-wrapper-id"
                    >
                      <div
                        class="MuiCollapse-wrapperInner-id"
                      >
                        <div
                          role="region"
                        >
                          <div
                            class="ChannelsAvailabilityCard-container-id"
                          >
                            <div
                              class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                            >
                              <div
                                aria-label="isPublished"
                                class="MuiFormGroup-root-id"
                                role="radiogroup"
                              >
                                <label
                                  class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                                >
                                  <span
                                    aria-disabled="false"
                                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                                  >
                                    <span
                                      class="MuiIconButton-label-id"
                                    >
                                      <input
                                        class="PrivateSwitchBase-input-id"
                                        name="isPublished"
                                        type="radio"
                                        value="true"
                                      />
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <circle
                                          cx="12"
                                          cy="12"
                                          fill="var(--background-paper)"
                                          r="11"
                                          stroke="currentColor"
                                          stroke-width="2"
                                        />
                                      </svg>
                                    </span>
                                  </span>
                                  <span
                                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                  >
                                    <p
                                      class="ChannelsAvailabilityCard-label-id"
                                    >
                                      Visible
                                    </p>
                                  </span>
                                </label>
                                <label
                                  class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                                >
                                  <span
                                    aria-disabled="false"
                                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                                  >
                                    <span
                                      class="MuiIconButton-label-id"
                                    >
                                      <input
                                        checked=""
                                        class="PrivateSwitchBase-input-id"
                                        name="isPublished"
                                        type="radio"
                                        value="false"
                                      />
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <circle
                                          cx="12"
                                          cy="12"
                                          fill="currentColor"
                                          r="12"
                                        />
                                        <circle
                                          cx="12"
                                          cy="12"
                                          fill="var(--background-paper)"
                                          r="5"
                                        />
                                      </svg>
                                    </span>
                                  </span>
                                  <span
                                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                  >
                                    <p
                                      class="ChannelsAvailabilityCard-label-id"
                                    >
                                      Hidden
                                    </p>
                                  </span>
                                </label>
                              </div>
                            </div>
                            <div
                              class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
                            >
                              Set publication date
                            </div>
                            <div
                              class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
                            >
                              <label
                                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                                data-shrink="true"
                              >
                                Publish on
                              </label>
                              <div
                                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                              >
                                <input
                                  aria-invalid="false"
                                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                                  name="channel:publicationDate:223"
                                  type="date"
                                  value=""
                                />
                                <fieldset
                                  aria-hidden="true"
                                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                                >
                                  <legend
                                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                  >
                                    <span>
                                      Publish on
                                    </span>
                                  </legend>
                                </fieldset>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Collections / Collection list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Collections
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-collection"
            href="/collections/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create collection
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Collections
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Collections"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <a
          class="TableRowLink-link-id"
          href="/collections/Q29sbGVjdGlvbjox"
        />
        <a
          class="TableRowLink-link-id"
          href="/collections/Q29sbGVjdGlvbjoy"
        />
        <a
          class="TableRowLink-link-id"
          href="/collections/Q29sbGVjdGlvbjoz"
        />
        <a
          class="TableRowLink-link-id"
          href="/collections/Q29sbGVjdGlvbjoa"
        />
        <a
          class="TableRowLink-link-id"
          href="/collections/Q29sbGVjdGlvbjob"
        />
        <a
          class="TableRowLink-link-id"
          href="/collections/Q29sbGVjdGlvbjoc"
        />
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CollectionList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Collection Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CollectionList-colProducts-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Products
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CollectionList-colAvailability-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Availability
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
              data-test-id="id-Q29sbGVjdGlvbjox"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
                data-test-id="name"
              >
                Summer collection
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
              >
                4
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
                data-test-availability="true"
                data-test-id="availability"
              >
                <div
                  class="MuiChip-root-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpublished
                  </span>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
              data-test-id="id-Q29sbGVjdGlvbjoy"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
                data-test-id="name"
              >
                Winter sale
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
              >
                4
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
                data-test-availability="true"
                data-test-id="availability"
              >
                <div>
                  <div
                    aria-controls="availability-menu"
                    aria-haspopup="true"
                    role="button"
                  >
                    <div
                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-outlined-id"
                    >
                      <span
                        class="MuiChip-label-id Pill-label-id"
                      >
                        1 Channel
                      </span>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
              data-test-id="id-Q29sbGVjdGlvbjoz"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
                data-test-id="name"
              >
                Vintage vibes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
              >
                4
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
                data-test-availability="true"
                data-test-id="availability"
              >
                <div>
                  <div
                    aria-controls="availability-menu"
                    aria-haspopup="true"
                    role="button"
                  >
                    <div
                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-outlined-id"
                    >
                      <span
                        class="MuiChip-label-id Pill-label-id"
                      >
                        1 Channel
                      </span>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
              data-test-id="id-Q29sbGVjdGlvbjoa"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
                data-test-id="name"
              >
                Merry Christmas
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
              >
                4
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
                data-test-availability="true"
                data-test-id="availability"
              >
                <div>
                  <div
                    aria-controls="availability-menu"
                    aria-haspopup="true"
                    role="button"
                  >
                    <div
                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-outlined-id"
                    >
                      <span
                        class="MuiChip-label-id Pill-label-id"
                      >
                        1 Channel
                      </span>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
              data-test-id="id-Q29sbGVjdGlvbjob"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
                data-test-id="name"
              >
                80s Miami
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
              >
                4
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
                data-test-availability="true"
                data-test-id="availability"
              >
                <div>
                  <div
                    aria-controls="availability-menu"
                    aria-haspopup="true"
                    role="button"
                  >
                    <div
                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-outlined-id"
                    >
                      <span
                        class="MuiChip-label-id Pill-label-id"
                      >
                        1 Channel
                      </span>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
              data-test-id="id-Q29sbGVjdGlvbjoc"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
                data-test-id="name"
              >
                Yellow Submarine 2019
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
              >
                4
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
                data-test-availability="true"
                data-test-id="availability"
              >
                <div>
                  <div
                    aria-controls="availability-menu"
                    aria-haspopup="true"
                    role="button"
                  >
                    <div
                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-outlined-id"
                    >
                      <span
                        class="MuiChip-label-id Pill-label-id"
                      >
                        1 Channel
                      </span>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Collections / Collection list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Collections
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="true"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
            data-test-id="create-collection"
            href="/collections/add"
            role="button"
            tabindex="-1"
          >
            <span
              class="MuiButton-label-id"
            >
              Create collection
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Collections
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Collections"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CollectionList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Collection Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CollectionList-colProducts-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Products
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CollectionList-colAvailability-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Availability
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id CollectionList-tableRow-id"
              data-test-id="id-undefined"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
                data-test-id="name"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
                data-test-availability="false"
                data-test-id="availability"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Collections / Collection list no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Collections
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-collection"
            href="/collections/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create collection
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Collections
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Collections"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CollectionList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Collection Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CollectionList-colProducts-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Products
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CollectionList-colAvailability-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Availability
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
                colspan="4"
              >
                No collections found
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Collections / Create collection default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Add Collection
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-description"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Description
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                />
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Background Image (optional)
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload image
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="CollectionImage-fileField-id"
                  id="fileUpload"
                  type="file"
                />
              </div>
            </div>
            <div
              class="ImageUpload-photosIconContainer-id"
              tabindex="0"
            >
              <div
                class=""
              >
                <input
                  accept="image/*"
                  autocomplete="off"
                  class="ImageUpload-fileField-id"
                  multiple=""
                  style="display:none"
                  tabindex="-1"
                  type="file"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    clip-rule="evenodd"
                    d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
                    fill="currentColor"
                    fill-rule="evenodd"
                  />
                </svg>
                <div
                  class="MuiTypography-root-id ImageUpload-uploadText-id MuiTypography-body1-id"
                >
                  Drop here to upload
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Search Engine Preview
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this collection easier to find
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 7 out of 2 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test-id="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Test
                    </div>
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    />
                  </div>
                  <div
                    aria-disabled="false"
                    aria-hidden="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        data-test-id="expand-icon"
                        fill="none"
                        height="7"
                        viewBox="0 0 10 7"
                        width="10"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M1 1L5 5L9 1"
                          stroke="#28234A"
                          stroke-opacity="0.4"
                          stroke-width="2"
                        />
                      </svg>
                    </span>
                  </div>
                </div>
                <div
                  class="MuiCollapse-container-id MuiCollapse-hidden-id"
                  style="min-height:0px"
                >
                  <div
                    class="MuiCollapse-wrapper-id"
                  >
                    <div
                      class="MuiCollapse-wrapperInner-id"
                    >
                      <div
                        role="region"
                      >
                        <div
                          class="ChannelsAvailabilityCard-container-id"
                        >
                          <div
                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                          >
                            <div
                              aria-label="isPublished"
                              class="MuiFormGroup-root-id"
                              role="radiogroup"
                            >
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="true"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="11"
                                        stroke="currentColor"
                                        stroke-width="2"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Visible
                                  </p>
                                </span>
                              </label>
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      checked=""
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="false"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="currentColor"
                                        r="12"
                                      />
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="5"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Hidden
                                  </p>
                                </span>
                              </label>
                            </div>
                          </div>
                          <div
                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
                          >
                            Set publication date
                          </div>
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                              data-shrink="true"
                            >
                              Publish on
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                                name="channel:publicationDate:Q2hhbm5lcDoy"
                                type="date"
                                value=""
                              />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                >
                                  <span>
                                    Publish on
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test-id="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Channel
                    </div>
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    />
                  </div>
                  <div
                    aria-disabled="false"
                    aria-hidden="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        data-test-id="expand-icon"
                        fill="none"
                        height="7"
                        viewBox="0 0 10 7"
                        width="10"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M1 1L5 5L9 1"
                          stroke="#28234A"
                          stroke-opacity="0.4"
                          stroke-width="2"
                        />
                      </svg>
                    </span>
                  </div>
                </div>
                <div
                  class="MuiCollapse-container-id MuiCollapse-hidden-id"
                  style="min-height:0px"
                >
                  <div
                    class="MuiCollapse-wrapper-id"
                  >
                    <div
                      class="MuiCollapse-wrapperInner-id"
                    >
                      <div
                        role="region"
                      >
                        <div
                          class="ChannelsAvailabilityCard-container-id"
                        >
                          <div
                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                          >
                            <div
                              aria-label="isPublished"
                              class="MuiFormGroup-root-id"
                              role="radiogroup"
                            >
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="true"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="11"
                                        stroke="currentColor"
                                        stroke-width="2"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Visible
                                  </p>
                                </span>
                              </label>
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      checked=""
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="false"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="currentColor"
                                        r="12"
                                      />
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="5"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Hidden
                                  </p>
                                </span>
                              </label>
                            </div>
                          </div>
                          <div
                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
                          >
                            Set publication date
                          </div>
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                              data-shrink="true"
                            >
                              Publish on
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                                name="channel:publicationDate:Q2hhbm7lbDoy213"
                                type="date"
                                value=""
                              />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                >
                                  <span>
                                    Publish on
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test-id="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Channel test
                    </div>
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    />
                  </div>
                  <div
                    aria-disabled="false"
                    aria-hidden="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        data-test-id="expand-icon"
                        fill="none"
                        height="7"
                        viewBox="0 0 10 7"
                        width="10"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M1 1L5 5L9 1"
                          stroke="#28234A"
                          stroke-opacity="0.4"
                          stroke-width="2"
                        />
                      </svg>
                    </span>
                  </div>
                </div>
                <div
                  class="MuiCollapse-container-id MuiCollapse-hidden-id"
                  style="min-height:0px"
                >
                  <div
                    class="MuiCollapse-wrapper-id"
                  >
                    <div
                      class="MuiCollapse-wrapperInner-id"
                    >
                      <div
                        role="region"
                      >
                        <div
                          class="ChannelsAvailabilityCard-container-id"
                        >
                          <div
                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                          >
                            <div
                              aria-label="isPublished"
                              class="MuiFormGroup-root-id"
                              role="radiogroup"
                            >
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="true"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="11"
                                        stroke="currentColor"
                                        stroke-width="2"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Visible
                                  </p>
                                </span>
                              </label>
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      checked=""
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="false"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="currentColor"
                                        r="12"
                                      />
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="5"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Hidden
                                  </p>
                                </span>
                              </label>
                            </div>
                          </div>
                          <div
                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
                          >
                            Set publication date
                          </div>
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                              data-shrink="true"
                            >
                              Publish on
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                                name="channel:publicationDate:Q2hhbn5lbDoytr"
                                type="date"
                                value=""
                              />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                >
                                  <span>
                                    Publish on
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test-id="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Channel USD
                    </div>
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    />
                  </div>
                  <div
                    aria-disabled="false"
                    aria-hidden="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        data-test-id="expand-icon"
                        fill="none"
                        height="7"
                        viewBox="0 0 10 7"
                        width="10"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M1 1L5 5L9 1"
                          stroke="#28234A"
                          stroke-opacity="0.4"
                          stroke-width="2"
                        />
                      </svg>
                    </span>
                  </div>
                </div>
                <div
                  class="MuiCollapse-container-id MuiCollapse-hidden-id"
                  style="min-height:0px"
                >
                  <div
                    class="MuiCollapse-wrapper-id"
                  >
                    <div
                      class="MuiCollapse-wrapperInner-id"
                    >
                      <div
                        role="region"
                      >
                        <div
                          class="ChannelsAvailabilityCard-container-id"
                        >
                          <div
                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                          >
                            <div
                              aria-label="isPublished"
                              class="MuiFormGroup-root-id"
                              role="radiogroup"
                            >
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="true"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="11"
                                        stroke="currentColor"
                                        stroke-width="2"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Visible
                                  </p>
                                </span>
                              </label>
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      checked=""
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="false"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="currentColor"
                                        r="12"
                                      />
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="5"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Hidden
                                  </p>
                                </span>
                              </label>
                            </div>
                          </div>
                          <div
                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
                          >
                            Set publication date
                          </div>
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                              data-shrink="true"
                            >
                              Publish on
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                                name="channel:publicationDate:Q2hhbm5lbDo5bot"
                                type="date"
                                value=""
                              />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                >
                                  <span>
                                    Publish on
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test-id="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Channel
                    </div>
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    />
                  </div>
                  <div
                    aria-disabled="false"
                    aria-hidden="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        data-test-id="expand-icon"
                        fill="none"
                        height="7"
                        viewBox="0 0 10 7"
                        width="10"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M1 1L5 5L9 1"
                          stroke="#28234A"
                          stroke-opacity="0.4"
                          stroke-width="2"
                        />
                      </svg>
                    </span>
                  </div>
                </div>
                <div
                  class="MuiCollapse-container-id MuiCollapse-hidden-id"
                  style="min-height:0px"
                >
                  <div
                    class="MuiCollapse-wrapper-id"
                  >
                    <div
                      class="MuiCollapse-wrapperInner-id"
                    >
                      <div
                        role="region"
                      >
                        <div
                          class="ChannelsAvailabilityCard-container-id"
                        >
                          <div
                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                          >
                            <div
                              aria-label="isPublished"
                              class="MuiFormGroup-root-id"
                              role="radiogroup"
                            >
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="true"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="11"
                                        stroke="currentColor"
                                        stroke-width="2"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Visible
                                  </p>
                                </span>
                              </label>
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      checked=""
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="false"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="currentColor"
                                        r="12"
                                      />
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="5"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Hidden
                                  </p>
                                </span>
                              </label>
                            </div>
                          </div>
                          <div
                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
                          >
                            Set publication date
                          </div>
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                              data-shrink="true"
                            >
                              Publish on
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                                name="channel:publicationDate:Q2hhbm7lbDoyr0tr"
                                type="date"
                                value=""
                              />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                >
                                  <span>
                                    Publish on
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test-id="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Channel test
                    </div>
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    />
                  </div>
                  <div
                    aria-disabled="false"
                    aria-hidden="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        data-test-id="expand-icon"
                        fill="none"
                        height="7"
                        viewBox="0 0 10 7"
                        width="10"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M1 1L5 5L9 1"
                          stroke="#28234A"
                          stroke-opacity="0.4"
                          stroke-width="2"
                        />
                      </svg>
                    </span>
                  </div>
                </div>
                <div
                  class="MuiCollapse-container-id MuiCollapse-hidden-id"
                  style="min-height:0px"
                >
                  <div
                    class="MuiCollapse-wrapper-id"
                  >
                    <div
                      class="MuiCollapse-wrapperInner-id"
                    >
                      <div
                        role="region"
                      >
                        <div
                          class="ChannelsAvailabilityCard-container-id"
                        >
                          <div
                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                          >
                            <div
                              aria-label="isPublished"
                              class="MuiFormGroup-root-id"
                              role="radiogroup"
                            >
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="true"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="11"
                                        stroke="currentColor"
                                        stroke-width="2"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Visible
                                  </p>
                                </span>
                              </label>
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      checked=""
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="false"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="currentColor"
                                        r="12"
                                      />
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="5"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Hidden
                                  </p>
                                </span>
                              </label>
                            </div>
                          </div>
                          <div
                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
                          >
                            Set publication date
                          </div>
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                              data-shrink="true"
                            >
                              Publish on
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                                name="channel:publicationDate:Q2hhbn5lbDoyya"
                                type="date"
                                value=""
                              />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                >
                                  <span>
                                    Publish on
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test-id="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Channel USD
                    </div>
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    />
                  </div>
                  <div
                    aria-disabled="false"
                    aria-hidden="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        data-test-id="expand-icon"
                        fill="none"
                        height="7"
                        viewBox="0 0 10 7"
                        width="10"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M1 1L5 5L9 1"
                          stroke="#28234A"
                          stroke-opacity="0.4"
                          stroke-width="2"
                        />
                      </svg>
                    </span>
                  </div>
                </div>
                <div
                  class="MuiCollapse-container-id MuiCollapse-hidden-id"
                  style="min-height:0px"
                >
                  <div
                    class="MuiCollapse-wrapper-id"
                  >
                    <div
                      class="MuiCollapse-wrapperInner-id"
                    >
                      <div
                        role="region"
                      >
                        <div
                          class="ChannelsAvailabilityCard-container-id"
                        >
                          <div
                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                          >
                            <div
                              aria-label="isPublished"
                              class="MuiFormGroup-root-id"
                              role="radiogroup"
                            >
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="true"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="11"
                                        stroke="currentColor"
                                        stroke-width="2"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Visible
                                  </p>
                                </span>
                              </label>
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      checked=""
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="false"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="currentColor"
                                        r="12"
                                      />
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="5"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Hidden
                                  </p>
                                </span>
                              </label>
                            </div>
                          </div>
                          <div
                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
                          >
                            Set publication date
                          </div>
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                              data-shrink="true"
                            >
                              Publish on
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                                name="channel:publicationDate:Q2hhbm5lbDo5w0z"
                                type="date"
                                value=""
                              />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                >
                                  <span>
                                    Publish on
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Add Collection
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                  data-shrink="false"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  This field is required
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-description"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Description
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  This field is required
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Background Image (optional)
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload image
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="CollectionImage-fileField-id"
                  id="fileUpload"
                  type="file"
                />
              </div>
            </div>
            <div
              class="ImageUpload-photosIconContainer-id"
              tabindex="0"
            >
              <div
                class=""
              >
                <input
                  accept="image/*"
                  autocomplete="off"
                  class="ImageUpload-fileField-id"
                  multiple=""
                  style="display:none"
                  tabindex="-1"
                  type="file"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    clip-rule="evenodd"
                    d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
                    fill="currentColor"
                    fill-rule="evenodd"
                  />
                </svg>
                <div
                  class="MuiTypography-root-id ImageUpload-uploadText-id MuiTypography-body1-id"
                >
                  Drop here to upload
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Search Engine Preview
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this collection easier to find
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 7 out of 2 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test-id="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Test
                    </div>
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    />
                  </div>
                  <div
                    aria-disabled="false"
                    aria-hidden="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        data-test-id="expand-icon"
                        fill="none"
                        height="7"
                        viewBox="0 0 10 7"
                        width="10"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M1 1L5 5L9 1"
                          stroke="#28234A"
                          stroke-opacity="0.4"
                          stroke-width="2"
                        />
                      </svg>
                    </span>
                  </div>
                </div>
                <div
                  class="MuiCollapse-container-id MuiCollapse-hidden-id"
                  style="min-height:0px"
                >
                  <div
                    class="MuiCollapse-wrapper-id"
                  >
                    <div
                      class="MuiCollapse-wrapperInner-id"
                    >
                      <div
                        role="region"
                      >
                        <div
                          class="ChannelsAvailabilityCard-container-id"
                        >
                          <div
                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                          >
                            <div
                              aria-label="isPublished"
                              class="MuiFormGroup-root-id"
                              role="radiogroup"
                            >
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="true"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="11"
                                        stroke="currentColor"
                                        stroke-width="2"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Visible
                                  </p>
                                </span>
                              </label>
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      checked=""
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="false"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="currentColor"
                                        r="12"
                                      />
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="5"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Hidden
                                  </p>
                                </span>
                              </label>
                            </div>
                          </div>
                          <div
                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
                          >
                            Set publication date
                          </div>
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                              data-shrink="true"
                            >
                              Publish on
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                                name="channel:publicationDate:Q2hhbm5lcDoy"
                                type="date"
                                value=""
                              />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                >
                                  <span>
                                    Publish on
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test-id="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Channel
                    </div>
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    />
                  </div>
                  <div
                    aria-disabled="false"
                    aria-hidden="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        data-test-id="expand-icon"
                        fill="none"
                        height="7"
                        viewBox="0 0 10 7"
                        width="10"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M1 1L5 5L9 1"
                          stroke="#28234A"
                          stroke-opacity="0.4"
                          stroke-width="2"
                        />
                      </svg>
                    </span>
                  </div>
                </div>
                <div
                  class="MuiCollapse-container-id MuiCollapse-hidden-id"
                  style="min-height:0px"
                >
                  <div
                    class="MuiCollapse-wrapper-id"
                  >
                    <div
                      class="MuiCollapse-wrapperInner-id"
                    >
                      <div
                        role="region"
                      >
                        <div
                          class="ChannelsAvailabilityCard-container-id"
                        >
                          <div
                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                          >
                            <div
                              aria-label="isPublished"
                              class="MuiFormGroup-root-id"
                              role="radiogroup"
                            >
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="true"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="11"
                                        stroke="currentColor"
                                        stroke-width="2"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Visible
                                  </p>
                                </span>
                              </label>
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      checked=""
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="false"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="currentColor"
                                        r="12"
                                      />
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="5"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Hidden
                                  </p>
                                </span>
                              </label>
                            </div>
                          </div>
                          <div
                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
                          >
                            Set publication date
                          </div>
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                              data-shrink="true"
                            >
                              Publish on
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                                name="channel:publicationDate:Q2hhbm7lbDoy213"
                                type="date"
                                value=""
                              />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                >
                                  <span>
                                    Publish on
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test-id="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Channel test
                    </div>
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    />
                  </div>
                  <div
                    aria-disabled="false"
                    aria-hidden="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        data-test-id="expand-icon"
                        fill="none"
                        height="7"
                        viewBox="0 0 10 7"
                        width="10"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M1 1L5 5L9 1"
                          stroke="#28234A"
                          stroke-opacity="0.4"
                          stroke-width="2"
                        />
                      </svg>
                    </span>
                  </div>
                </div>
                <div
                  class="MuiCollapse-container-id MuiCollapse-hidden-id"
                  style="min-height:0px"
                >
                  <div
                    class="MuiCollapse-wrapper-id"
                  >
                    <div
                      class="MuiCollapse-wrapperInner-id"
                    >
                      <div
                        role="region"
                      >
                        <div
                          class="ChannelsAvailabilityCard-container-id"
                        >
                          <div
                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                          >
                            <div
                              aria-label="isPublished"
                              class="MuiFormGroup-root-id"
                              role="radiogroup"
                            >
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="true"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="11"
                                        stroke="currentColor"
                                        stroke-width="2"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Visible
                                  </p>
                                </span>
                              </label>
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      checked=""
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="false"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="currentColor"
                                        r="12"
                                      />
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="5"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Hidden
                                  </p>
                                </span>
                              </label>
                            </div>
                          </div>
                          <div
                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
                          >
                            Set publication date
                          </div>
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                              data-shrink="true"
                            >
                              Publish on
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                                name="channel:publicationDate:Q2hhbn5lbDoytr"
                                type="date"
                                value=""
                              />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                >
                                  <span>
                                    Publish on
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test-id="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Channel USD
                    </div>
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    />
                  </div>
                  <div
                    aria-disabled="false"
                    aria-hidden="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        data-test-id="expand-icon"
                        fill="none"
                        height="7"
                        viewBox="0 0 10 7"
                        width="10"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M1 1L5 5L9 1"
                          stroke="#28234A"
                          stroke-opacity="0.4"
                          stroke-width="2"
                        />
                      </svg>
                    </span>
                  </div>
                </div>
                <div
                  class="MuiCollapse-container-id MuiCollapse-hidden-id"
                  style="min-height:0px"
                >
                  <div
                    class="MuiCollapse-wrapper-id"
                  >
                    <div
                      class="MuiCollapse-wrapperInner-id"
                    >
                      <div
                        role="region"
                      >
                        <div
                          class="ChannelsAvailabilityCard-container-id"
                        >
                          <div
                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                          >
                            <div
                              aria-label="isPublished"
                              class="MuiFormGroup-root-id"
                              role="radiogroup"
                            >
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="true"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="11"
                                        stroke="currentColor"
                                        stroke-width="2"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Visible
                                  </p>
                                </span>
                              </label>
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      checked=""
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="false"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="currentColor"
                                        r="12"
                                      />
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="5"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Hidden
                                  </p>
                                </span>
                              </label>
                            </div>
                          </div>
                          <div
                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
                          >
                            Set publication date
                          </div>
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                              data-shrink="true"
                            >
                              Publish on
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                                name="channel:publicationDate:Q2hhbm5lbDo5bot"
                                type="date"
                                value=""
                              />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                >
                                  <span>
                                    Publish on
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test-id="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Channel
                    </div>
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    />
                  </div>
                  <div
                    aria-disabled="false"
                    aria-hidden="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        data-test-id="expand-icon"
                        fill="none"
                        height="7"
                        viewBox="0 0 10 7"
                        width="10"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M1 1L5 5L9 1"
                          stroke="#28234A"
                          stroke-opacity="0.4"
                          stroke-width="2"
                        />
                      </svg>
                    </span>
                  </div>
                </div>
                <div
                  class="MuiCollapse-container-id MuiCollapse-hidden-id"
                  style="min-height:0px"
                >
                  <div
                    class="MuiCollapse-wrapper-id"
                  >
                    <div
                      class="MuiCollapse-wrapperInner-id"
                    >
                      <div
                        role="region"
                      >
                        <div
                          class="ChannelsAvailabilityCard-container-id"
                        >
                          <div
                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                          >
                            <div
                              aria-label="isPublished"
                              class="MuiFormGroup-root-id"
                              role="radiogroup"
                            >
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="true"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="11"
                                        stroke="currentColor"
                                        stroke-width="2"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Visible
                                  </p>
                                </span>
                              </label>
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      checked=""
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="false"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="currentColor"
                                        r="12"
                                      />
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="5"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Hidden
                                  </p>
                                </span>
                              </label>
                            </div>
                          </div>
                          <div
                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
                          >
                            Set publication date
                          </div>
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                              data-shrink="true"
                            >
                              Publish on
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                                name="channel:publicationDate:Q2hhbm7lbDoyr0tr"
                                type="date"
                                value=""
                              />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                >
                                  <span>
                                    Publish on
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test-id="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Channel test
                    </div>
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    />
                  </div>
                  <div
                    aria-disabled="false"
                    aria-hidden="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        data-test-id="expand-icon"
                        fill="none"
                        height="7"
                        viewBox="0 0 10 7"
                        width="10"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M1 1L5 5L9 1"
                          stroke="#28234A"
                          stroke-opacity="0.4"
                          stroke-width="2"
                        />
                      </svg>
                    </span>
                  </div>
                </div>
                <div
                  class="MuiCollapse-container-id MuiCollapse-hidden-id"
                  style="min-height:0px"
                >
                  <div
                    class="MuiCollapse-wrapper-id"
                  >
                    <div
                      class="MuiCollapse-wrapperInner-id"
                    >
                      <div
                        role="region"
                      >
                        <div
                          class="ChannelsAvailabilityCard-container-id"
                        >
                          <div
                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                          >
                            <div
                              aria-label="isPublished"
                              class="MuiFormGroup-root-id"
                              role="radiogroup"
                            >
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="true"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="11"
                                        stroke="currentColor"
                                        stroke-width="2"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Visible
                                  </p>
                                </span>
                              </label>
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      checked=""
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="false"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="currentColor"
                                        r="12"
                                      />
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="5"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Hidden
                                  </p>
                                </span>
                              </label>
                            </div>
                          </div>
                          <div
                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
                          >
                            Set publication date
                          </div>
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                              data-shrink="true"
                            >
                              Publish on
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                                name="channel:publicationDate:Q2hhbn5lbDoyya"
                                type="date"
                                value=""
                              />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                >
                                  <span>
                                    Publish on
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test-id="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Channel USD
                    </div>
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    />
                  </div>
                  <div
                    aria-disabled="false"
                    aria-hidden="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        data-test-id="expand-icon"
                        fill="none"
                        height="7"
                        viewBox="0 0 10 7"
                        width="10"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M1 1L5 5L9 1"
                          stroke="#28234A"
                          stroke-opacity="0.4"
                          stroke-width="2"
                        />
                      </svg>
                    </span>
                  </div>
                </div>
                <div
                  class="MuiCollapse-container-id MuiCollapse-hidden-id"
                  style="min-height:0px"
                >
                  <div
                    class="MuiCollapse-wrapper-id"
                  >
                    <div
                      class="MuiCollapse-wrapperInner-id"
                    >
                      <div
                        role="region"
                      >
                        <div
                          class="ChannelsAvailabilityCard-container-id"
                        >
                          <div
                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                          >
                            <div
                              aria-label="isPublished"
                              class="MuiFormGroup-root-id"
                              role="radiogroup"
                            >
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="true"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="11"
                                        stroke="currentColor"
                                        stroke-width="2"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Visible
                                  </p>
                                </span>
                              </label>
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      checked=""
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="false"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="currentColor"
                                        r="12"
                                      />
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="5"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Hidden
                                  </p>
                                </span>
                              </label>
                            </div>
                          </div>
                          <div
                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
                          >
                            Set publication date
                          </div>
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                              data-shrink="true"
                            >
                              Publish on
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                                name="channel:publicationDate:Q2hhbm5lbDo5w0z"
                                type="date"
                                value=""
                              />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                >
                                  <span>
                                    Publish on
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Collections / Create collection loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Add Collection
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-description"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Description
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
                />
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Background Image (optional)
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload image
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="CollectionImage-fileField-id"
                  id="fileUpload"
                  type="file"
                />
              </div>
            </div>
            <div
              class="ImageUpload-photosIconContainer-id"
              tabindex="0"
            >
              <div
                class=""
              >
                <input
                  accept="image/*"
                  autocomplete="off"
                  class="ImageUpload-fileField-id"
                  multiple=""
                  style="display:none"
                  tabindex="-1"
                  type="file"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    clip-rule="evenodd"
                    d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
                    fill="currentColor"
                    fill-rule="evenodd"
                  />
                </svg>
                <div
                  class="MuiTypography-root-id ImageUpload-uploadText-id MuiTypography-body1-id"
                >
                  Drop here to upload
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Search Engine Preview
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this collection easier to find
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 7 out of 2 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test-id="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Test
                    </div>
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    />
                  </div>
                  <div
                    aria-disabled="false"
                    aria-hidden="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        data-test-id="expand-icon"
                        fill="none"
                        height="7"
                        viewBox="0 0 10 7"
                        width="10"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M1 1L5 5L9 1"
                          stroke="#28234A"
                          stroke-opacity="0.4"
                          stroke-width="2"
                        />
                      </svg>
                    </span>
                  </div>
                </div>
                <div
                  class="MuiCollapse-container-id MuiCollapse-hidden-id"
                  style="min-height:0px"
                >
                  <div
                    class="MuiCollapse-wrapper-id"
                  >
                    <div
                      class="MuiCollapse-wrapperInner-id"
                    >
                      <div
                        role="region"
                      >
                        <div
                          class="ChannelsAvailabilityCard-container-id"
                        >
                          <div
                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                          >
                            <div
                              aria-label="isPublished"
                              class="MuiFormGroup-root-id"
                              role="radiogroup"
                            >
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="true"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="11"
                                        stroke="currentColor"
                                        stroke-width="2"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Visible
                                  </p>
                                </span>
                              </label>
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      checked=""
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="false"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="currentColor"
                                        r="12"
                                      />
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="5"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Hidden
                                  </p>
                                </span>
                              </label>
                            </div>
                          </div>
                          <div
                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
                          >
                            Set publication date
                          </div>
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                              data-shrink="true"
                            >
                              Publish on
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                                name="channel:publicationDate:Q2hhbm5lcDoy"
                                type="date"
                                value=""
                              />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                >
                                  <span>
                                    Publish on
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test-id="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Channel
                    </div>
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    />
                  </div>
                  <div
                    aria-disabled="false"
                    aria-hidden="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        data-test-id="expand-icon"
                        fill="none"
                        height="7"
                        viewBox="0 0 10 7"
                        width="10"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M1 1L5 5L9 1"
                          stroke="#28234A"
                          stroke-opacity="0.4"
                          stroke-width="2"
                        />
                      </svg>
                    </span>
                  </div>
                </div>
                <div
                  class="MuiCollapse-container-id MuiCollapse-hidden-id"
                  style="min-height:0px"
                >
                  <div
                    class="MuiCollapse-wrapper-id"
                  >
                    <div
                      class="MuiCollapse-wrapperInner-id"
                    >
                      <div
                        role="region"
                      >
                        <div
                          class="ChannelsAvailabilityCard-container-id"
                        >
                          <div
                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                          >
                            <div
                              aria-label="isPublished"
                              class="MuiFormGroup-root-id"
                              role="radiogroup"
                            >
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="true"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="11"
                                        stroke="currentColor"
                                        stroke-width="2"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Visible
                                  </p>
                                </span>
                              </label>
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      checked=""
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="false"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="currentColor"
                                        r="12"
                                      />
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="5"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Hidden
                                  </p>
                                </span>
                              </label>
                            </div>
                          </div>
                          <div
                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
                          >
                            Set publication date
                          </div>
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                              data-shrink="true"
                            >
                              Publish on
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                                name="channel:publicationDate:Q2hhbm7lbDoy213"
                                type="date"
                                value=""
                              />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                >
                                  <span>
                                    Publish on
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test-id="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Channel test
                    </div>
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    />
                  </div>
                  <div
                    aria-disabled="false"
                    aria-hidden="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        data-test-id="expand-icon"
                        fill="none"
                        height="7"
                        viewBox="0 0 10 7"
                        width="10"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M1 1L5 5L9 1"
                          stroke="#28234A"
                          stroke-opacity="0.4"
                          stroke-width="2"
                        />
                      </svg>
                    </span>
                  </div>
                </div>
                <div
                  class="MuiCollapse-container-id MuiCollapse-hidden-id"
                  style="min-height:0px"
                >
                  <div
                    class="MuiCollapse-wrapper-id"
                  >
                    <div
                      class="MuiCollapse-wrapperInner-id"
                    >
                      <div
                        role="region"
                      >
                        <div
                          class="ChannelsAvailabilityCard-container-id"
                        >
                          <div
                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                          >
                            <div
                              aria-label="isPublished"
                              class="MuiFormGroup-root-id"
                              role="radiogroup"
                            >
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="true"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="11"
                                        stroke="currentColor"
                                        stroke-width="2"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Visible
                                  </p>
                                </span>
                              </label>
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      checked=""
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="false"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="currentColor"
                                        r="12"
                                      />
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="5"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Hidden
                                  </p>
                                </span>
                              </label>
                            </div>
                          </div>
                          <div
                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
                          >
                            Set publication date
                          </div>
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                              data-shrink="true"
                            >
                              Publish on
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                                name="channel:publicationDate:Q2hhbn5lbDoytr"
                                type="date"
                                value=""
                              />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                >
                                  <span>
                                    Publish on
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test-id="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Channel USD
                    </div>
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    />
                  </div>
                  <div
                    aria-disabled="false"
                    aria-hidden="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        data-test-id="expand-icon"
                        fill="none"
                        height="7"
                        viewBox="0 0 10 7"
                        width="10"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M1 1L5 5L9 1"
                          stroke="#28234A"
                          stroke-opacity="0.4"
                          stroke-width="2"
                        />
                      </svg>
                    </span>
                  </div>
                </div>
                <div
                  class="MuiCollapse-container-id MuiCollapse-hidden-id"
                  style="min-height:0px"
                >
                  <div
                    class="MuiCollapse-wrapper-id"
                  >
                    <div
                      class="MuiCollapse-wrapperInner-id"
                    >
                      <div
                        role="region"
                      >
                        <div
                          class="ChannelsAvailabilityCard-container-id"
                        >
                          <div
                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                          >
                            <div
                              aria-label="isPublished"
                              class="MuiFormGroup-root-id"
                              role="radiogroup"
                            >
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="true"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="11"
                                        stroke="currentColor"
                                        stroke-width="2"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Visible
                                  </p>
                                </span>
                              </label>
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      checked=""
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="false"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="currentColor"
                                        r="12"
                                      />
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="5"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Hidden
                                  </p>
                                </span>
                              </label>
                            </div>
                          </div>
                          <div
                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
                          >
                            Set publication date
                          </div>
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                              data-shrink="true"
                            >
                              Publish on
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                                name="channel:publicationDate:Q2hhbm5lbDo5bot"
                                type="date"
                                value=""
                              />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                >
                                  <span>
                                    Publish on
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test-id="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Channel
                    </div>
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    />
                  </div>
                  <div
                    aria-disabled="false"
                    aria-hidden="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        data-test-id="expand-icon"
                        fill="none"
                        height="7"
                        viewBox="0 0 10 7"
                        width="10"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M1 1L5 5L9 1"
                          stroke="#28234A"
                          stroke-opacity="0.4"
                          stroke-width="2"
                        />
                      </svg>
                    </span>
                  </div>
                </div>
                <div
                  class="MuiCollapse-container-id MuiCollapse-hidden-id"
                  style="min-height:0px"
                >
                  <div
                    class="MuiCollapse-wrapper-id"
                  >
                    <div
                      class="MuiCollapse-wrapperInner-id"
                    >
                      <div
                        role="region"
                      >
                        <div
                          class="ChannelsAvailabilityCard-container-id"
                        >
                          <div
                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                          >
                            <div
                              aria-label="isPublished"
                              class="MuiFormGroup-root-id"
                              role="radiogroup"
                            >
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="true"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="11"
                                        stroke="currentColor"
                                        stroke-width="2"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Visible
                                  </p>
                                </span>
                              </label>
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      checked=""
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="false"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="currentColor"
                                        r="12"
                                      />
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="5"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Hidden
                                  </p>
                                </span>
                              </label>
                            </div>
                          </div>
                          <div
                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
                          >
                            Set publication date
                          </div>
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                              data-shrink="true"
                            >
                              Publish on
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                                name="channel:publicationDate:Q2hhbm7lbDoyr0tr"
                                type="date"
                                value=""
                              />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                >
                                  <span>
                                    Publish on
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test-id="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Channel test
                    </div>
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    />
                  </div>
                  <div
                    aria-disabled="false"
                    aria-hidden="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        data-test-id="expand-icon"
                        fill="none"
                        height="7"
                        viewBox="0 0 10 7"
                        width="10"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M1 1L5 5L9 1"
                          stroke="#28234A"
                          stroke-opacity="0.4"
                          stroke-width="2"
                        />
                      </svg>
                    </span>
                  </div>
                </div>
                <div
                  class="MuiCollapse-container-id MuiCollapse-hidden-id"
                  style="min-height:0px"
                >
                  <div
                    class="MuiCollapse-wrapper-id"
                  >
                    <div
                      class="MuiCollapse-wrapperInner-id"
                    >
                      <div
                        role="region"
                      >
                        <div
                          class="ChannelsAvailabilityCard-container-id"
                        >
                          <div
                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                          >
                            <div
                              aria-label="isPublished"
                              class="MuiFormGroup-root-id"
                              role="radiogroup"
                            >
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="true"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="11"
                                        stroke="currentColor"
                                        stroke-width="2"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Visible
                                  </p>
                                </span>
                              </label>
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      checked=""
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="false"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="currentColor"
                                        r="12"
                                      />
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="5"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Hidden
                                  </p>
                                </span>
                              </label>
                            </div>
                          </div>
                          <div
                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
                          >
                            Set publication date
                          </div>
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                              data-shrink="true"
                            >
                              Publish on
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                                name="channel:publicationDate:Q2hhbn5lbDoyya"
                                type="date"
                                value=""
                              />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                >
                                  <span>
                                    Publish on
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test-id="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiAccordionSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Channel USD
                    </div>
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    />
                  </div>
                  <div
                    aria-disabled="false"
                    aria-hidden="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        data-test-id="expand-icon"
                        fill="none"
                        height="7"
                        viewBox="0 0 10 7"
                        width="10"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M1 1L5 5L9 1"
                          stroke="#28234A"
                          stroke-opacity="0.4"
                          stroke-width="2"
                        />
                      </svg>
                    </span>
                  </div>
                </div>
                <div
                  class="MuiCollapse-container-id MuiCollapse-hidden-id"
                  style="min-height:0px"
                >
                  <div
                    class="MuiCollapse-wrapper-id"
                  >
                    <div
                      class="MuiCollapse-wrapperInner-id"
                    >
                      <div
                        role="region"
                      >
                        <div
                          class="ChannelsAvailabilityCard-container-id"
                        >
                          <div
                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
                          >
                            <div
                              aria-label="isPublished"
                              class="MuiFormGroup-root-id"
                              role="radiogroup"
                            >
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="true"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="11"
                                        stroke="currentColor"
                                        stroke-width="2"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Visible
                                  </p>
                                </span>
                              </label>
                              <label
                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
                              >
                                <span
                                  aria-disabled="false"
                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                                >
                                  <span
                                    class="MuiIconButton-label-id"
                                  >
                                    <input
                                      checked=""
                                      class="PrivateSwitchBase-input-id"
                                      name="isPublished"
                                      type="radio"
                                      value="false"
                                    />
                                    <svg
                                      aria-hidden="true"
                                      class="MuiSvgIcon-root-id"
                                      focusable="false"
                                      viewBox="0 0 24 24"
                                    >
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="currentColor"
                                        r="12"
                                      />
                                      <circle
                                        cx="12"
                                        cy="12"
                                        fill="var(--background-paper)"
                                        r="5"
                                      />
                                    </svg>
                                  </span>
                                </span>
                                <span
                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                                >
                                  <p
                                    class="ChannelsAvailabilityCard-label-id"
                                  >
                                    Hidden
                                  </p>
                                </span>
                              </label>
                            </div>
                          </div>
                          <div
                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
                          >
                            Set publication date
                          </div>
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                              data-shrink="true"
                            >
                              Publish on
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                                name="channel:publicationDate:Q2hhbm5lbDo5w0z"
                                type="date"
                                value=""
                              />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                >
                                  <span>
                                    Publish on
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Configuration default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="MuiTypography-root-id VersionInfo-container-id MuiTypography-caption-id"
    >
      <div
        class="VersionInfo-versionItem-id"
      >
        dashboard v3.0.0-b.3
      </div>
      <div
        class="VersionInfo-versionItem-id"
      >
        core v3.0.0-b.15
      </div>
    </div>
    <div
      class="ExtendedPageHeader-root-id ConfigurationPage-header-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Configuration
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="ConfigurationPage-configurationCategory-id"
    >
      <div
        class="ConfigurationPage-configurationLabel-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Attributes and Product Types
        </div>
      </div>
      <div
        class="ConfigurationPage-configurationItem-id"
      >
        <a
          class="ConfigurationPage-link-id"
          href="/attributes/"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="configuration-menu-attributes-settings-subsection-attributes"
          >
            <div
              class="MuiCardContent-root-id NavigationCard-cardContent-id"
            >
              <div
                class="NavigationCard-content-id"
              >
                <div
                  class="NavigationCard-icon-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 32 32"
                  >
                    <path
                      clip-rule="evenodd"
                      d="M29 3C29.5523 3 30 3.44772 30 4V8C30 8.55229 29.5523 9 29 9C28.4477 9 28 8.55229 28 8V7L12 7V8C12 8.55229 11.5523 9 11 9C10.4477 9 10 8.55229 10 8V4C10 3.44772 10.4477 3 11 3C11.5523 3 12 3.44772 12 4V5L28 5V4C28 3.44772 28.4477 3 29 3ZM2 12C2 11.4477 2.44772 11 3 11H7C7.55228 11 8 11.4477 8 12C8 12.5523 7.55228 13 7 13H6V27H7C7.55228 27 8 27.4477 8 28C8 28.5523 7.55228 29 7 29H3C2.44772 29 2 28.5523 2 28C2 27.4477 2.44772 27 3 27H4V13H3C2.44772 13 2 12.5523 2 12ZM14.2997 11C13.1142 11 12.0398 11.6982 11.5583 12.7816L10.0862 16.0939C10.0294 16.2217 10 16.3601 10 16.5V26C10 27.6569 11.3431 29 13 29H27C28.6569 29 30 27.6569 30 26V16.5C30 16.3601 29.9706 16.2217 29.9138 16.0939L28.4417 12.7816C27.9602 11.6982 26.8858 11 25.7003 11H14.2997ZM13.3859 13.5939C13.5464 13.2327 13.9046 13 14.2997 13H25.7003C26.0954 13 26.4536 13.2327 26.6141 13.5939L27.4612 15.5H12.5388L13.3859 13.5939ZM23.5 17.5H28V26C28 26.5523 27.5523 27 27 27H13C12.4477 27 12 26.5523 12 26V17.5H16.5V23C16.5 23.3603 16.6938 23.6927 17.0073 23.8702C17.3208 24.0477 17.7056 24.0429 18.0145 23.8575L20 22.6662L21.9855 23.8575C22.2944 24.0429 22.6792 24.0477 22.9927 23.8702C23.3062 23.6927 23.5 23.3603 23.5 23V17.5ZM18.5 21.2338V17.5H21.5V21.2338L20.5145 20.6425C20.1978 20.4525 19.8022 20.4525 19.4855 20.6425L18.5 21.2338Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
                <div>
                  <div
                    class="MuiTypography-root-id NavigationCard-boxLinkTitle-id MuiTypography-subtitle1-id"
                  >
                    Attributes
                  </div>
                  <div
                    class="MuiTypography-root-id NavigationCard-boxLinkText-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                  >
                    Determine attributes used to create product types
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a>
        <a
          class="ConfigurationPage-link-id"
          href="/product-types/"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="configuration-menu-product-types-settings-subsection-product types"
          >
            <div
              class="MuiCardContent-root-id NavigationCard-cardContent-id"
            >
              <div
                class="NavigationCard-content-id"
              >
                <div
                  class="NavigationCard-icon-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 44 44"
                  >
                    <path
                      clip-rule="evenodd"
                      d="M0 6.5V33L20 40L40 33V6.5L20 0L0 6.5ZM2.5 8.69935V31.2263L18.75 36.9138V14.3869L2.5 8.69935ZM21.25 14.3869V36.9138L37.5 31.2263V8.69935L21.25 14.3869ZM34.1436 7.22539L20 2.62872L5.8564 7.22539L20 12.1756L34.1436 7.22539Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
                <div>
                  <div
                    class="MuiTypography-root-id NavigationCard-boxLinkTitle-id MuiTypography-subtitle1-id"
                  >
                    Product Types
                  </div>
                  <div
                    class="MuiTypography-root-id NavigationCard-boxLinkText-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                  >
                    Define types of products you sell
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a>
      </div>
    </div>
    <div
      class="ConfigurationPage-configurationCategory-id"
    >
      <div
        class="ConfigurationPage-configurationLabel-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Product Settings
        </div>
      </div>
      <div
        class="ConfigurationPage-configurationItem-id"
      >
        <a
          class="ConfigurationPage-link-id"
          href="/taxes/"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="configuration-menu-taxes-settings-subsection-taxes"
          >
            <div
              class="MuiCardContent-root-id NavigationCard-cardContent-id"
            >
              <div
                class="NavigationCard-content-id"
              >
                <div
                  class="NavigationCard-icon-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 32 32"
                  >
                    <path
                      clip-rule="evenodd"
                      d="M8 4C7.44772 4 7 4.44772 7 5V27C7 27.5523 7.44772 28 8 28H24C24.5523 28 25 27.5523 25 27V5C25 4.44772 24.5523 4 24 4H8ZM5 5C5 3.34315 6.34315 2 8 2H24C25.6569 2 27 3.34315 27 5V27C27 28.6569 25.6569 30 24 30H8C6.34315 30 5 28.6569 5 27V5ZM9 9C9 7.89543 9.89543 7 11 7L21 7C22.1046 7 23 7.89543 23 9V11C23 12.1046 22.1046 13 21 13H11C9.89543 13 9 12.1046 9 11V9ZM21 9L11 9V11H21V9ZM12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17ZM17 16C17 16.5523 16.5523 17 16 17C15.4477 17 15 16.5523 15 16C15 15.4477 15.4477 15 16 15C16.5523 15 17 15.4477 17 16ZM20 17C20.5523 17 21 16.5523 21 16C21 15.4477 20.5523 15 20 15C19.4477 15 19 15.4477 19 16C19 16.5523 19.4477 17 20 17ZM13 20C13 20.5523 12.5523 21 12 21C11.4477 21 11 20.5523 11 20C11 19.4477 11.4477 19 12 19C12.5523 19 13 19.4477 13 20ZM16 21C16.5523 21 17 20.5523 17 20C17 19.4477 16.5523 19 16 19C15.4477 19 15 19.4477 15 20C15 20.5523 15.4477 21 16 21ZM21 20C21 20.5523 20.5523 21 20 21C19.4477 21 19 20.5523 19 20C19 19.4477 19.4477 19 20 19C20.5523 19 21 19.4477 21 20ZM16 25C16.5523 25 17 24.5523 17 24C17 23.4477 16.5523 23 16 23C15.4477 23 15 23.4477 15 24C15 24.5523 15.4477 25 16 25Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
                <div>
                  <div
                    class="MuiTypography-root-id NavigationCard-boxLinkTitle-id MuiTypography-subtitle1-id"
                  >
                    Taxes
                  </div>
                  <div
                    class="MuiTypography-root-id NavigationCard-boxLinkText-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                  >
                    Manage how your store charges tax
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a>
      </div>
    </div>
    <div
      class="ConfigurationPage-configurationCategory-id"
    >
      <div
        class="ConfigurationPage-configurationLabel-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Staff Settings
        </div>
      </div>
      <div
        class="ConfigurationPage-configurationItem-id"
      >
        <a
          class="ConfigurationPage-link-id"
          href="/staff/"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="configuration-menu-staff-settings-subsection-staff members"
          >
            <div
              class="MuiCardContent-root-id NavigationCard-cardContent-id"
            >
              <div
                class="NavigationCard-content-id"
              >
                <div
                  class="NavigationCard-icon-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 32 32"
                  >
                    <path
                      clip-rule="evenodd"
                      d="M10 4C10 2.89543 10.8954 2 12 2H14C15.1046 2 16 2.89543 16 4V5.5H19C20.6569 5.5 22 6.84315 22 8.5V27C22 28.6569 20.6569 30 19 30H7C5.34315 30 4 28.6569 4 27V8.5C4 6.84315 5.34315 5.5 7 5.5H10V4ZM10 7.5H7C6.44772 7.5 6 7.94772 6 8.5V27C6 27.5523 6.44772 28 7 28H19C19.5523 28 20 27.5523 20 27V8.5C20 7.94772 19.5523 7.5 19 7.5H16V7.57143C16 8.676 15.1046 9.57143 14 9.57143H12C10.8954 9.57143 10 8.676 10 7.57143V7.5ZM14 4H12V7.57143L14 7.57143V4ZM8.5835 18.4762C8.5835 16.5563 10.1398 15 12.0597 15H14.4406C16.3605 15 17.9168 16.5563 17.9168 18.4762C17.9168 19.7123 16.9148 20.7143 15.6787 20.7143H10.8216C9.58553 20.7143 8.5835 19.7123 8.5835 18.4762ZM12.0597 17C11.2444 17 10.5835 17.6609 10.5835 18.4762C10.5835 18.6077 10.6901 18.7143 10.8216 18.7143H15.6787C15.8102 18.7143 15.9168 18.6077 15.9168 18.4762C15.9168 17.6609 15.2559 17 14.4406 17H12.0597ZM8.66675 21.5C8.11446 21.5 7.66675 21.9477 7.66675 22.5C7.66675 23.0523 8.11446 23.5 8.66675 23.5H17.8334C18.3857 23.5 18.8334 23.0523 18.8334 22.5C18.8334 21.9477 18.3857 21.5 17.8334 21.5H8.66675ZM7.66675 25.2858C7.66675 24.7335 8.11446 24.2858 8.66675 24.2858H11.4167C11.969 24.2858 12.4167 24.7335 12.4167 25.2858C12.4167 25.8381 11.969 26.2858 11.4167 26.2858H8.66675C8.11446 26.2858 7.66675 25.8381 7.66675 25.2858ZM16.0002 24.2858C15.448 24.2858 15.0002 24.7335 15.0002 25.2858C15.0002 25.8381 15.448 26.2858 16.0002 26.2858H17.8336C18.3859 26.2858 18.8336 25.8381 18.8336 25.2858C18.8336 24.7335 18.3859 24.2858 17.8336 24.2858H16.0002ZM15.0834 12.2857C15.0834 13.3114 14.2626 14.1429 13.2501 14.1429C12.2376 14.1429 11.4167 13.3114 11.4167 12.2857C11.4167 11.2601 12.2376 10.4286 13.2501 10.4286C14.2626 10.4286 15.0834 11.2601 15.0834 12.2857ZM21 2C20.4477 2 20 2.44772 20 3C20 3.55228 20.4477 4 21 4H25C25.5523 4 26 4.44772 26 5V25C26 25.5523 25.5523 26 25 26H24.4285C23.8763 26 23.4285 26.4477 23.4285 27C23.4285 27.5523 23.8763 28 24.4285 28H25C26.6569 28 28 26.6569 28 25V5C28 3.34314 26.6569 2 25 2H21Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
                <div>
                  <div
                    class="MuiTypography-root-id NavigationCard-boxLinkTitle-id MuiTypography-subtitle1-id"
                  >
                    Staff Members
                  </div>
                  <div
                    class="MuiTypography-root-id NavigationCard-boxLinkText-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                  >
                    Manage your employees and their permissions
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a>
        <a
          class="ConfigurationPage-link-id"
          href="/permission-groups/"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="configuration-menu-permission-groups-settings-subsection-permission groups"
          >
            <div
              class="MuiCardContent-root-id NavigationCard-cardContent-id"
            >
              <div
                class="NavigationCard-content-id"
              >
                <div
                  class="NavigationCard-icon-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 32 32"
                  >
                    <path
                      clip-rule="evenodd"
                      d="M16 4C13.7909 4 12 5.79086 12 8V11.9355C13.205 11.3367 14.5632 11 16 11C17.4368 11 18.795 11.3367 20 11.9355V8C20 5.79086 18.2091 4 16 4ZM22 13.2917V8C22 4.68629 19.3137 2 16 2C12.6863 2 10 4.68629 10 8V13.2917C8.15875 14.9396 7 17.3345 7 20C7 24.9706 11.0294 29 16 29C20.9706 29 25 24.9706 25 20C25 17.3345 23.8412 14.9396 22 13.2917ZM14 18C14 17.4477 14.4477 17 15 17H17C17.5523 17 18 17.4477 18 18C18 18.5523 17.5523 19 17 19V22C17 22.5523 16.5523 23 16 23C15.4477 23 15 22.5523 15 22V19C14.4477 19 14 18.5523 14 18ZM23 20C23 23.866 19.866 27 16 27C12.134 27 9 23.866 9 20C9 16.134 12.134 13 16 13C19.866 13 23 16.134 23 20Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
                <div>
                  <div
                    class="MuiTypography-root-id NavigationCard-boxLinkTitle-id MuiTypography-subtitle1-id"
                  >
                    Permission Groups
                  </div>
                  <div
                    class="MuiTypography-root-id NavigationCard-boxLinkText-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                  >
                    Manage your permission groups and their permissions
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a>
      </div>
    </div>
    <div
      class="ConfigurationPage-configurationCategory-id"
    >
      <div
        class="ConfigurationPage-configurationLabel-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Shipping Settings
        </div>
      </div>
      <div
        class="ConfigurationPage-configurationItem-id"
      >
        <a
          class="ConfigurationPage-link-id"
          href="/shipping/"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="configurationMenuShipping-settings-subsection-shipping methods"
          >
            <div
              class="MuiCardContent-root-id NavigationCard-cardContent-id"
            >
              <div
                class="NavigationCard-content-id"
              >
                <div
                  class="NavigationCard-icon-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 32 32"
                  >
                    <path
                      clip-rule="evenodd"
                      d="M12.4476 8.88049C12.5081 8.37806 12.9344 8 13.4405 8H15.8867L15.4413 10.467C15.109 12.3074 16.5233 14 18.3936 14H20.8289C22.2801 14 23.5233 12.9612 23.7812 11.533L24.4191 8H26.7449C27.3446 8 27.8094 8.52414 27.7378 9.11951L26.0526 23.1195C25.9921 23.6219 25.5658 24 25.0598 24H11.7553C11.1556 24 10.6908 23.4759 10.7625 22.8805L12.4476 8.88049ZM17.4095 10.8223L17.9191 8H22.3867L21.813 11.1777C21.727 11.6537 21.3126 12 20.8289 12H18.3936C17.7702 12 17.2987 11.4358 17.4095 10.8223ZM13.4405 6C11.9223 6 10.6434 7.13417 10.462 8.64148L8.7768 22.6415C8.5618 24.4276 9.95629 26 11.7553 26H25.0598C26.5779 26 27.8568 24.8658 28.0383 23.3585L29.7234 9.35852C29.9384 7.57241 28.5439 6 26.7449 6H13.4405ZM3 9.78943C2.44772 9.78943 2 10.2371 2 10.7894C2 11.3417 2.44772 11.7894 3 11.7894H8.57143C9.12371 11.7894 9.57143 11.3417 9.57143 10.7894C9.57143 10.2371 9.12371 9.78943 8.57143 9.78943H3ZM2 15.5264C2 14.9741 2.44772 14.5264 3 14.5264H7.64286C8.19514 14.5264 8.64286 14.9741 8.64286 15.5264C8.64286 16.0787 8.19514 16.5264 7.64286 16.5264H3C2.44772 16.5264 2 16.0787 2 15.5264ZM3 19.2632C2.44772 19.2632 2 19.7109 2 20.2632C2 20.8155 2.44772 21.2632 3 21.2632H6.71429C7.26657 21.2632 7.71429 20.8155 7.71429 20.2632C7.71429 19.7109 7.26657 19.2632 6.71429 19.2632H3Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
                <div>
                  <div
                    class="MuiTypography-root-id NavigationCard-boxLinkTitle-id MuiTypography-subtitle1-id"
                  >
                    Shipping Methods
                  </div>
                  <div
                    class="MuiTypography-root-id NavigationCard-boxLinkText-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                  >
                    Manage how you ship out orders
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a>
        <a
          class="ConfigurationPage-link-id"
          href="/warehouses/"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="configuration-menu-warehouses-settings-subsection-warehouses"
          >
            <div
              class="MuiCardContent-root-id NavigationCard-cardContent-id"
            >
              <div
                class="NavigationCard-content-id"
              >
                <div
                  class="NavigationCard-icon-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 32 32"
                  >
                    <path
                      clip-rule="evenodd"
                      d="M10.5 5C10.5 4.44772 10.9477 4 11.5 4H13.1429V6.64286C13.1429 7.74743 14.0383 8.64286 15.1429 8.64286H16.8571C17.9617 8.64286 18.8571 7.74743 18.8571 6.64286V4H20.5C21.0523 4 21.5 4.44772 21.5 5V14C21.5 14.5523 21.0523 15 20.5 15H18H14H11.5C10.9477 15 10.5 14.5523 10.5 14V5ZM8.67071 15C8.56015 14.6872 8.5 14.3506 8.5 14V5C8.5 3.34315 9.84314 2 11.5 2H20.5C22.1569 2 23.5 3.34315 23.5 5V14C23.5 14.3506 23.4398 14.6872 23.3293 15H27C28.6569 15 30 16.3431 30 18V27C30 28.6569 28.6569 30 27 30H18C17.2316 30 16.5308 29.7111 16 29.2361C15.4692 29.7111 14.7684 30 14 30H5C3.34315 30 2 28.6569 2 27V18C2 16.3431 3.34315 15 5 15H8.67071ZM12.3571 17V19.6429C12.3571 20.7474 11.4617 21.6429 10.3571 21.6429H8.64286C7.53829 21.6429 6.64286 20.7474 6.64286 19.6429V17H5C4.44772 17 4 17.4477 4 18V27C4 27.5523 4.44772 28 5 28H14C14.5523 28 15 27.5523 15 27V18C15 17.4477 14.5523 17 14 17H12.3571ZM18 17C17.4477 17 17 17.4477 17 18V27C17 27.5523 17.4477 28 18 28H27C27.5523 28 28 27.5523 28 27V18C28 17.4477 27.5523 17 27 17H25.3571V19.6429C25.3571 20.7474 24.4617 21.6429 23.3571 21.6429H21.6429C20.5383 21.6429 19.6429 20.7474 19.6429 19.6429V17H18ZM15.1429 6.64286V4H16.8571V6.64286L15.1429 6.64286ZM8.64286 17V19.6429H10.3571V17H8.64286ZM21.6429 17V19.6429H23.3571V17H21.6429Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
                <div>
                  <div
                    class="MuiTypography-root-id NavigationCard-boxLinkTitle-id MuiTypography-subtitle1-id"
                  >
                    Warehouses
                  </div>
                  <div
                    class="MuiTypography-root-id NavigationCard-boxLinkText-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                  >
                    Manage and update your warehouse information
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a>
      </div>
    </div>
    <div
      class="ConfigurationPage-configurationCategory-id"
    >
      <div
        class="ConfigurationPage-configurationLabel-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Content Management
        </div>
      </div>
      <div
        class="ConfigurationPage-configurationItem-id"
      >
        <a
          class="ConfigurationPage-link-id"
          href="/page-types/"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="configuration-menu-page-types-settings-subsection-page types"
          >
            <div
              class="MuiCardContent-root-id NavigationCard-cardContent-id"
            >
              <div
                class="NavigationCard-content-id"
              >
                <div
                  class="NavigationCard-icon-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 25"
                  >
                    <path
                      clip-rule="evenodd"
                      d="M9 4.00195C8.44772 4.00195 8 4.44967 8 5.00195V19.002C8 19.5542 8.44772 20.002 9 20.002H17C17.5523 20.002 18 19.5542 18 19.002V7.58038C18 7.31516 17.8946 7.06081 17.7071 6.87327L15.1287 4.29485C14.9411 4.10731 14.6868 4.00195 14.4216 4.00195H9ZM6 5.00195C6 3.3451 7.34315 2.00195 9 2.00195H14.4216C15.2172 2.00195 15.9803 2.31802 16.5429 2.88063L19.1213 5.45906C19.6839 6.02167 20 6.78473 20 7.58038V19.002C20 20.6588 18.6569 22.002 17 22.002H9C7.34315 22.002 6 20.6588 6 19.002V5.00195ZM4 6.00195C4.55228 6.00195 5 6.44967 5 7.00195V20.002C5 20.5542 4.55228 21.002 4 21.002C3.44772 21.002 3 20.5542 3 20.002V7.00195C3 6.44967 3.44772 6.00195 4 6.00195ZM10.5 13.002C10.2239 13.002 10 13.2258 10 13.502V14.502C10 14.7781 10.2239 15.002 10.5 15.002H15.5C15.7761 15.002 16 14.7781 16 14.502V13.502C16 13.2258 15.7761 13.002 15.5 13.002H10.5ZM10 10.502C10 10.2258 10.2239 10.002 10.5 10.002H15.5C15.7761 10.002 16 10.2258 16 10.502V11.502C16 11.7781 15.7761 12.002 15.5 12.002H10.5C10.2239 12.002 10 11.7781 10 11.502V10.502ZM10.5 16.002C10.2239 16.002 10 16.2258 10 16.502V17.502C10 17.7781 10.2239 18.002 10.5 18.002H15.5C15.7761 18.002 16 17.7781 16 17.502V16.502C16 16.2258 15.7761 16.002 15.5 16.002H10.5Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
                <div>
                  <div
                    class="MuiTypography-root-id NavigationCard-boxLinkTitle-id MuiTypography-subtitle1-id"
                  >
                    Page Types
                  </div>
                  <div
                    class="MuiTypography-root-id NavigationCard-boxLinkText-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                  >
                    Define types of content pages used in your store
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a>
      </div>
    </div>
    <div
      class="ConfigurationPage-configurationCategory-id"
    >
      <div
        class="ConfigurationPage-configurationLabel-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Miscellaneous
        </div>
      </div>
      <div
        class="ConfigurationPage-configurationItem-id"
      >
        <a
          class="ConfigurationPage-link-id"
          href="/navigation"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="configuration-menu-navigation-settings-subsection-navigation"
          >
            <div
              class="MuiCardContent-root-id NavigationCard-cardContent-id"
            >
              <div
                class="NavigationCard-content-id"
              >
                <div
                  class="NavigationCard-icon-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 32 32"
                  >
                    <path
                      clip-rule="evenodd"
                      d="M28 16C28 22.6274 22.6274 28 16 28C9.37258 28 4 22.6274 4 16C4 9.37258 9.37258 4 16 4C22.6274 4 28 9.37258 28 16ZM30 16C30 23.732 23.732 30 16 30C8.26801 30 2 23.732 2 16C2 8.26801 8.26801 2 16 2C23.732 2 30 8.26801 30 16ZM23.1271 11.4417C23.7506 9.83112 22.1768 8.24068 20.5597 8.8471L8.83347 13.2444C7.18709 13.8618 7.08139 16.1506 8.66386 16.9171L12.4577 18.7547L14.8987 23.4842C15.6895 25.0163 17.9187 24.8968 18.5411 23.2889L23.1271 11.4417ZM9.53571 15.1171L21.262 10.7198L16.676 22.5669L14.235 17.8374C14.0366 17.4531 13.7189 17.1433 13.3296 16.9548L9.53571 15.1171Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
                <div>
                  <div
                    class="MuiTypography-root-id NavigationCard-boxLinkTitle-id MuiTypography-subtitle1-id"
                  >
                    Navigation
                  </div>
                  <div
                    class="MuiTypography-root-id NavigationCard-boxLinkText-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                  >
                    Define how users can navigate through your store
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a>
        <a
          class="ConfigurationPage-link-id"
          href="/site-settings"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="configuration-menu-site-settings-settings-subsection-site settings"
          >
            <div
              class="MuiCardContent-root-id NavigationCard-cardContent-id"
            >
              <div
                class="NavigationCard-content-id"
              >
                <div
                  class="NavigationCard-icon-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 32 32"
                  >
                    <path
                      clip-rule="evenodd"
                      d="M14.5569 1.99987C14.5633 1.99994 14.5687 2 14.5732 2H17.3059C17.3105 2 17.3159 1.99994 17.3223 1.99987C17.4196 1.9988 17.7281 1.9954 18.0457 2.16599C18.3621 2.33595 18.568 2.60603 18.7172 2.84313C19.0113 3.31075 19.3827 4.15404 19.9745 5.63276C20.0129 5.7286 20.0876 5.80239 20.1755 5.83857C20.2665 5.87602 20.3735 5.87516 20.4702 5.83113C21.7035 5.26978 22.4275 4.97615 22.8699 4.82166C23.3214 4.66397 23.5477 4.62638 23.7607 4.62638C24.1447 4.62638 24.516 4.76407 24.8072 5.01445L24.8573 5.05748L26.8264 7.02071L26.8321 7.0266C26.8354 7.02999 26.8394 7.03403 26.8441 7.03872C26.914 7.10928 27.1285 7.3257 27.2303 7.66631C27.333 8.00963 27.2893 8.34564 27.2265 8.62294C27.1034 9.16609 26.7678 10.0291 26.1382 11.4982C26.0995 11.5884 26.1 11.688 26.1343 11.771C26.17 11.8573 26.2436 11.9299 26.339 11.9651C27.8172 12.5108 28.6684 12.8602 29.1436 13.1493C29.3878 13.2978 29.665 13.5062 29.8374 13.8331C30.0045 14.1502 30.0012 14.4607 30.0001 14.5585C30 14.5652 30 14.5709 30 14.5755V17.3077C30 17.3124 30.0001 17.318 30.0001 17.3245C30.0012 17.4229 30.0046 17.7311 29.8361 18.0485C29.6668 18.3676 29.3963 18.5758 29.1565 18.7273C28.6855 19.0249 27.8367 19.3984 26.3501 19.992C26.2595 20.0281 26.19 20.0987 26.1562 20.1812C26.1215 20.2658 26.1224 20.3671 26.164 20.4577C26.8211 21.8881 27.1744 22.7356 27.3062 23.2749C27.374 23.5522 27.4225 23.8923 27.3174 24.2424C27.2153 24.5829 26.9987 24.8009 26.9297 24.8703C26.925 24.8751 26.921 24.8791 26.9177 24.8825L26.9124 24.8879L24.9915 26.807C24.6928 27.1054 24.2913 27.2783 23.8693 27.2905L23.8405 26.2909V27.2909C23.6183 27.2909 23.3858 27.2317 23.2246 27.1862C23.033 27.1321 22.8055 27.056 22.549 26.9628C22.0343 26.7757 21.3525 26.5011 20.513 26.1445C20.4183 26.1042 20.3147 26.1046 20.2255 26.1414C20.134 26.1791 20.0576 26.2567 20.0203 26.357C19.4731 27.8282 19.124 28.6735 18.838 29.1449C18.6918 29.3856 18.4862 29.662 18.1631 29.8349C17.8454 30.005 17.5345 30.0013 17.4381 30.0001C17.4316 30.0001 17.4261 30 17.4216 30H14.6884C14.6839 30 14.6784 30.0001 14.6719 30.0001C14.5749 30.0012 14.2665 30.0047 13.949 29.8347C13.6321 29.6649 13.4258 29.3948 13.2763 29.1574C12.9817 28.6896 12.6099 27.8457 12.0175 26.366C11.9793 26.2707 11.9052 26.1973 11.818 26.1611C11.727 26.1233 11.6197 26.124 11.5229 26.1681C10.289 26.7303 9.56587 27.0242 9.12494 27.1788C8.67577 27.3363 8.44992 27.3747 8.23624 27.3747C7.84824 27.3747 7.47347 27.2336 7.18179 26.9778L7.13438 26.9362L5.16666 24.972C5.16337 24.9686 5.15942 24.9646 5.15478 24.9599C5.0846 24.8898 4.86835 24.6737 4.76541 24.3321C4.66184 23.9883 4.70551 23.6517 4.76815 23.3746C4.89096 22.8313 5.22649 21.9679 5.85632 20.4988C5.89444 20.4099 5.89387 20.3116 5.86007 20.23C5.82504 20.1454 5.75279 20.074 5.65904 20.0393C4.18074 19.491 3.32977 19.1401 2.85487 18.8502C2.61094 18.7013 2.33422 18.4928 2.16222 18.1663C1.99509 17.849 1.99871 17.5386 1.99985 17.4408C1.99992 17.4341 1.99999 17.4285 1.99999 17.4238V14.6895C1.99999 14.6848 1.99993 14.6791 1.99985 14.6724C1.99874 14.5736 1.99524 14.2642 2.16284 13.9468C2.33284 13.6248 2.60536 13.4163 2.84509 13.2656C3.31517 12.9702 4.16344 12.5995 5.64698 12.0074C5.73702 11.9714 5.80635 11.9013 5.84029 11.8192C5.87534 11.7344 5.87461 11.6326 5.8327 11.5414C5.1727 10.1062 4.81717 9.25205 4.68784 8.70729C4.62117 8.42646 4.57457 8.07733 4.69254 7.71996C4.80574 7.37703 5.03525 7.16207 5.10707 7.0948C5.10944 7.09257 5.11164 7.09051 5.11366 7.08861L7.0056 5.19568C7.30278 4.89835 7.70209 4.72542 8.12227 4.71211L8.15395 5.7116V4.7116C8.37565 4.7116 8.60784 4.77026 8.77018 4.81582C8.96241 4.86977 9.19061 4.94573 9.44798 5.03891C9.9644 5.22588 10.6481 5.50041 11.4896 5.85727C11.5829 5.89683 11.6849 5.89633 11.7723 5.86009C11.8619 5.82297 11.9371 5.74672 11.9737 5.64785C12.5208 4.17297 12.8719 3.32652 13.16 2.85389C13.307 2.61271 13.5125 2.33806 13.8335 2.16572C14.1511 1.99518 14.461 1.99876 14.5569 1.99987ZM8.27526 6.75452L6.66608 8.36455C6.77144 8.71717 7.04331 9.38697 7.64979 10.7059C7.92061 11.2948 7.9395 11.9761 7.68866 12.5831C7.4454 13.1717 6.97234 13.6318 6.38834 13.8649C4.99859 14.4196 4.32571 14.7205 3.99999 14.9051V17.2019C4.32437 17.3767 4.99072 17.6583 6.35448 18.1641C6.96227 18.3895 7.45687 18.8583 7.70801 19.4651C7.95107 20.0523 7.94163 20.7105 7.69451 21.2869C7.10208 22.6688 6.84085 23.3592 6.74298 23.7196L8.35461 25.3283C8.38591 25.3181 8.42192 25.3059 8.46313 25.2915C8.81825 25.167 9.47667 24.9026 10.6937 24.3481C11.2885 24.0772 11.9737 24.0603 12.5846 24.3138C13.1764 24.5595 13.639 25.0353 13.8742 25.6226C14.4272 27.0038 14.7294 27.6748 14.9141 28H17.1889C17.363 27.6747 17.6434 27.0105 18.1457 25.6598C18.3743 25.0452 18.849 24.5458 19.4626 24.2926C20.053 24.049 20.7131 24.0565 21.2949 24.3037C22.122 24.655 22.7664 24.9138 23.2323 25.0831C23.4389 25.1582 23.6007 25.2122 23.722 25.2481L25.3329 23.6388C25.2272 23.2864 24.9549 22.6168 24.3466 21.2926C24.0771 20.7058 24.0576 20.0275 24.3057 19.4223C24.5483 18.8309 25.0226 18.3685 25.6085 18.1346C27.0016 17.5783 27.6751 17.2749 28 17.0893V14.7987C27.6754 14.6246 27.0092 14.3444 25.6464 13.8414C25.0353 13.6157 24.538 13.1447 24.286 12.535C24.0429 11.9468 24.0524 11.2877 24.2999 10.7103C24.8931 9.32619 25.1545 8.63573 25.2523 8.27547L23.6433 6.67135C23.6107 6.6819 23.5729 6.69459 23.5293 6.70982C23.1736 6.83405 22.5149 7.09788 21.2988 7.65142C20.7062 7.92117 20.0239 7.93887 19.4145 7.68813C18.8193 7.44325 18.3539 6.96588 18.1177 6.37596C17.5655 4.9962 17.2635 4.32536 17.079 4H14.8078C14.6332 4.32454 14.3511 4.98941 13.8489 6.34343C13.6216 6.956 13.1493 7.45446 12.5379 7.70778C11.9488 7.95184 11.2897 7.94488 10.7088 7.69857C9.88024 7.34721 9.23429 7.08859 8.76713 6.91946C8.55969 6.84435 8.39715 6.79042 8.27526 6.75452ZM25.3793 23.831C25.3793 23.831 25.3791 23.8298 25.379 23.8276Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M16 18C17.1046 18 18 17.1046 18 16C18 14.8954 17.1046 14 16 14C14.8954 14 14 14.8954 14 16C14 17.1046 14.8954 18 16 18ZM16 20C18.2091 20 20 18.2091 20 16C20 13.7909 18.2091 12 16 12C13.7909 12 12 13.7909 12 16C12 18.2091 13.7909 20 16 20Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
                <div>
                  <div
                    class="MuiTypography-root-id NavigationCard-boxLinkTitle-id MuiTypography-subtitle1-id"
                  >
                    Site Settings
                  </div>
                  <div
                    class="MuiTypography-root-id NavigationCard-boxLinkText-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                  >
                    View and update your site settings
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a>
        <a
          class="ConfigurationPage-link-id"
          href="/plugins/"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="configuration-plugins-pages-settings-subsection-plugins"
          >
            <div
              class="MuiCardContent-root-id NavigationCard-cardContent-id"
            >
              <div
                class="NavigationCard-content-id"
              >
                <div
                  class="NavigationCard-icon-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
                    focusable="false"
                    preserveAspectRatio="xMinYMin meet"
                    viewBox="-8 -5 44 44"
                  >
                    <g>
                      <path
                        clip-rule="evenodd"
                        d="M7.12891 6.10352e-05H12.9999V7.80006H18.7418V6.10352e-05H24.6128V7.80006H31.9999V14.6751H29.0967V29.7876H20.7418V33.6876H16.8708V40.0001H14.8708V33.6876H10.9999V29.7876H2.9031V14.6751H-0.00012207V7.80006H7.12891V6.10352e-05ZM9.12891 7.80006H10.9999V2.00006H9.12891V7.80006ZM4.9031 14.6751V27.7876H27.0967V14.6751H4.9031ZM12.9999 29.7876V31.6876H18.7418V29.7876H12.9999ZM22.6128 7.80006V2.00006H20.7418V7.80006H22.6128ZM1.99988 9.80006V12.6751H29.9999V9.80006H1.99988Z"
                        fill="currentColor"
                        fill-rule="evenodd"
                      />
                    </g>
                  </svg>
                </div>
                <div>
                  <div
                    class="MuiTypography-root-id NavigationCard-boxLinkTitle-id MuiTypography-subtitle1-id"
                  >
                    Plugins
                  </div>
                  <div
                    class="MuiTypography-root-id NavigationCard-boxLinkText-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                  >
                    View and update your plugins and their settings.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Configuration partial access 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="MuiTypography-root-id VersionInfo-container-id MuiTypography-caption-id"
    >
      <div
        class="VersionInfo-versionItem-id"
      >
        dashboard v3.0.0-b.3
      </div>
      <div
        class="VersionInfo-versionItem-id"
      >
        core v3.0.0-b.15
      </div>
    </div>
    <div
      class="ExtendedPageHeader-root-id ConfigurationPage-header-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Configuration
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="ConfigurationPage-configurationCategory-id"
    >
      <div
        class="ConfigurationPage-configurationLabel-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Attributes and Product Types
        </div>
      </div>
      <div
        class="ConfigurationPage-configurationItem-id"
      >
        <a
          class="ConfigurationPage-link-id"
          href="/attributes/"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="configuration-menu-attributes-settings-subsection-attributes"
          >
            <div
              class="MuiCardContent-root-id NavigationCard-cardContent-id"
            >
              <div
                class="NavigationCard-content-id"
              >
                <div
                  class="NavigationCard-icon-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 32 32"
                  >
                    <path
                      clip-rule="evenodd"
                      d="M29 3C29.5523 3 30 3.44772 30 4V8C30 8.55229 29.5523 9 29 9C28.4477 9 28 8.55229 28 8V7L12 7V8C12 8.55229 11.5523 9 11 9C10.4477 9 10 8.55229 10 8V4C10 3.44772 10.4477 3 11 3C11.5523 3 12 3.44772 12 4V5L28 5V4C28 3.44772 28.4477 3 29 3ZM2 12C2 11.4477 2.44772 11 3 11H7C7.55228 11 8 11.4477 8 12C8 12.5523 7.55228 13 7 13H6V27H7C7.55228 27 8 27.4477 8 28C8 28.5523 7.55228 29 7 29H3C2.44772 29 2 28.5523 2 28C2 27.4477 2.44772 27 3 27H4V13H3C2.44772 13 2 12.5523 2 12ZM14.2997 11C13.1142 11 12.0398 11.6982 11.5583 12.7816L10.0862 16.0939C10.0294 16.2217 10 16.3601 10 16.5V26C10 27.6569 11.3431 29 13 29H27C28.6569 29 30 27.6569 30 26V16.5C30 16.3601 29.9706 16.2217 29.9138 16.0939L28.4417 12.7816C27.9602 11.6982 26.8858 11 25.7003 11H14.2997ZM13.3859 13.5939C13.5464 13.2327 13.9046 13 14.2997 13H25.7003C26.0954 13 26.4536 13.2327 26.6141 13.5939L27.4612 15.5H12.5388L13.3859 13.5939ZM23.5 17.5H28V26C28 26.5523 27.5523 27 27 27H13C12.4477 27 12 26.5523 12 26V17.5H16.5V23C16.5 23.3603 16.6938 23.6927 17.0073 23.8702C17.3208 24.0477 17.7056 24.0429 18.0145 23.8575L20 22.6662L21.9855 23.8575C22.2944 24.0429 22.6792 24.0477 22.9927 23.8702C23.3062 23.6927 23.5 23.3603 23.5 23V17.5ZM18.5 21.2338V17.5H21.5V21.2338L20.5145 20.6425C20.1978 20.4525 19.8022 20.4525 19.4855 20.6425L18.5 21.2338Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
                <div>
                  <div
                    class="MuiTypography-root-id NavigationCard-boxLinkTitle-id MuiTypography-subtitle1-id"
                  >
                    Attributes
                  </div>
                  <div
                    class="MuiTypography-root-id NavigationCard-boxLinkText-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                  >
                    Determine attributes used to create product types
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a>
        <a
          class="ConfigurationPage-link-id"
          href="/product-types/"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="configuration-menu-product-types-settings-subsection-product types"
          >
            <div
              class="MuiCardContent-root-id NavigationCard-cardContent-id"
            >
              <div
                class="NavigationCard-content-id"
              >
                <div
                  class="NavigationCard-icon-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 44 44"
                  >
                    <path
                      clip-rule="evenodd"
                      d="M0 6.5V33L20 40L40 33V6.5L20 0L0 6.5ZM2.5 8.69935V31.2263L18.75 36.9138V14.3869L2.5 8.69935ZM21.25 14.3869V36.9138L37.5 31.2263V8.69935L21.25 14.3869ZM34.1436 7.22539L20 2.62872L5.8564 7.22539L20 12.1756L34.1436 7.22539Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
                <div>
                  <div
                    class="MuiTypography-root-id NavigationCard-boxLinkTitle-id MuiTypography-subtitle1-id"
                  >
                    Product Types
                  </div>
                  <div
                    class="MuiTypography-root-id NavigationCard-boxLinkText-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                  >
                    Define types of products you sell
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a>
      </div>
    </div>
    <div
      class="ConfigurationPage-configurationCategory-id"
    >
      <div
        class="ConfigurationPage-configurationLabel-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Shipping Settings
        </div>
      </div>
      <div
        class="ConfigurationPage-configurationItem-id"
      >
        <a
          class="ConfigurationPage-link-id"
          href="/warehouses/"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="configuration-menu-warehouses-settings-subsection-warehouses"
          >
            <div
              class="MuiCardContent-root-id NavigationCard-cardContent-id"
            >
              <div
                class="NavigationCard-content-id"
              >
                <div
                  class="NavigationCard-icon-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 32 32"
                  >
                    <path
                      clip-rule="evenodd"
                      d="M10.5 5C10.5 4.44772 10.9477 4 11.5 4H13.1429V6.64286C13.1429 7.74743 14.0383 8.64286 15.1429 8.64286H16.8571C17.9617 8.64286 18.8571 7.74743 18.8571 6.64286V4H20.5C21.0523 4 21.5 4.44772 21.5 5V14C21.5 14.5523 21.0523 15 20.5 15H18H14H11.5C10.9477 15 10.5 14.5523 10.5 14V5ZM8.67071 15C8.56015 14.6872 8.5 14.3506 8.5 14V5C8.5 3.34315 9.84314 2 11.5 2H20.5C22.1569 2 23.5 3.34315 23.5 5V14C23.5 14.3506 23.4398 14.6872 23.3293 15H27C28.6569 15 30 16.3431 30 18V27C30 28.6569 28.6569 30 27 30H18C17.2316 30 16.5308 29.7111 16 29.2361C15.4692 29.7111 14.7684 30 14 30H5C3.34315 30 2 28.6569 2 27V18C2 16.3431 3.34315 15 5 15H8.67071ZM12.3571 17V19.6429C12.3571 20.7474 11.4617 21.6429 10.3571 21.6429H8.64286C7.53829 21.6429 6.64286 20.7474 6.64286 19.6429V17H5C4.44772 17 4 17.4477 4 18V27C4 27.5523 4.44772 28 5 28H14C14.5523 28 15 27.5523 15 27V18C15 17.4477 14.5523 17 14 17H12.3571ZM18 17C17.4477 17 17 17.4477 17 18V27C17 27.5523 17.4477 28 18 28H27C27.5523 28 28 27.5523 28 27V18C28 17.4477 27.5523 17 27 17H25.3571V19.6429C25.3571 20.7474 24.4617 21.6429 23.3571 21.6429H21.6429C20.5383 21.6429 19.6429 20.7474 19.6429 19.6429V17H18ZM15.1429 6.64286V4H16.8571V6.64286L15.1429 6.64286ZM8.64286 17V19.6429H10.3571V17H8.64286ZM21.6429 17V19.6429H23.3571V17H21.6429Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
                <div>
                  <div
                    class="MuiTypography-root-id NavigationCard-boxLinkTitle-id MuiTypography-subtitle1-id"
                  >
                    Warehouses
                  </div>
                  <div
                    class="MuiTypography-root-id NavigationCard-boxLinkText-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                  >
                    Manage and update your warehouse information
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a>
      </div>
    </div>
    <div
      class="ConfigurationPage-configurationCategory-id"
    >
      <div
        class="ConfigurationPage-configurationLabel-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Content Management
        </div>
      </div>
      <div
        class="ConfigurationPage-configurationItem-id"
      >
        <a
          class="ConfigurationPage-link-id"
          href="/page-types/"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="configuration-menu-page-types-settings-subsection-page types"
          >
            <div
              class="MuiCardContent-root-id NavigationCard-cardContent-id"
            >
              <div
                class="NavigationCard-content-id"
              >
                <div
                  class="NavigationCard-icon-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 25"
                  >
                    <path
                      clip-rule="evenodd"
                      d="M9 4.00195C8.44772 4.00195 8 4.44967 8 5.00195V19.002C8 19.5542 8.44772 20.002 9 20.002H17C17.5523 20.002 18 19.5542 18 19.002V7.58038C18 7.31516 17.8946 7.06081 17.7071 6.87327L15.1287 4.29485C14.9411 4.10731 14.6868 4.00195 14.4216 4.00195H9ZM6 5.00195C6 3.3451 7.34315 2.00195 9 2.00195H14.4216C15.2172 2.00195 15.9803 2.31802 16.5429 2.88063L19.1213 5.45906C19.6839 6.02167 20 6.78473 20 7.58038V19.002C20 20.6588 18.6569 22.002 17 22.002H9C7.34315 22.002 6 20.6588 6 19.002V5.00195ZM4 6.00195C4.55228 6.00195 5 6.44967 5 7.00195V20.002C5 20.5542 4.55228 21.002 4 21.002C3.44772 21.002 3 20.5542 3 20.002V7.00195C3 6.44967 3.44772 6.00195 4 6.00195ZM10.5 13.002C10.2239 13.002 10 13.2258 10 13.502V14.502C10 14.7781 10.2239 15.002 10.5 15.002H15.5C15.7761 15.002 16 14.7781 16 14.502V13.502C16 13.2258 15.7761 13.002 15.5 13.002H10.5ZM10 10.502C10 10.2258 10.2239 10.002 10.5 10.002H15.5C15.7761 10.002 16 10.2258 16 10.502V11.502C16 11.7781 15.7761 12.002 15.5 12.002H10.5C10.2239 12.002 10 11.7781 10 11.502V10.502ZM10.5 16.002C10.2239 16.002 10 16.2258 10 16.502V17.502C10 17.7781 10.2239 18.002 10.5 18.002H15.5C15.7761 18.002 16 17.7781 16 17.502V16.502C16 16.2258 15.7761 16.002 15.5 16.002H10.5Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
                <div>
                  <div
                    class="MuiTypography-root-id NavigationCard-boxLinkTitle-id MuiTypography-subtitle1-id"
                  >
                    Page Types
                  </div>
                  <div
                    class="MuiTypography-root-id NavigationCard-boxLinkText-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                  >
                    Define types of content pages used in your store
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Customers / Address Book default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Tom Cooper's Address Book
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="add-address"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add address
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="CustomerAddressListPage-root-id"
    >
      <div
        class="MuiPaper-root-id MuiCard-root-id CustomerAddress-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Default Address
            </span>
          </div>
          <div
            class="MuiCardHeader-action-id"
          >
            <div>
              <button
                aria-haspopup="true"
                aria-label="More"
                class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                color="primary"
                data-test-id="show-more-button"
                tabindex="0"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    clip-rule="evenodd"
                    d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                    fill="currentColor"
                    fill-rule="evenodd"
                  />
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
        >
          <address
            style="font-style:inherit"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Elizabeth Vaughn
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body1-id"
            />
            <p
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              419 Ruiz Orchard Apt. 199
              <br />
              0238 Cremin Freeway
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
               52203 Port Danielshire
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Szwecja
            </p>
          </address>
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiCard-root-id CustomerAddress-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            />
          </div>
          <div
            class="MuiCardHeader-action-id"
          >
            <div>
              <button
                aria-haspopup="true"
                aria-label="More"
                class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                color="primary"
                data-test-id="show-more-button"
                tabindex="0"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    clip-rule="evenodd"
                    d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                    fill="currentColor"
                    fill-rule="evenodd"
                  />
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
        >
          <address
            style="font-style:inherit"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Timmy Macejkovic
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              +41 460-907-9374
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              0238 Cremin Freeway
              <br />
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
               15926 West Feliciamouth, Montana
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Japan
            </p>
          </address>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Customers / Address Book loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          ...'s Address Book
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="add-address"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add address
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="CustomerAddressListPage-root-id"
    >
      <div
        class="MuiPaper-root-id MuiCard-root-id CustomerAddress-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </span>
          </div>
          <div
            class="MuiCardHeader-action-id"
          >
            <div>
              <button
                aria-haspopup="true"
                aria-label="More"
                class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
                color="primary"
                data-test-id="show-more-button"
                disabled=""
                tabindex="-1"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    clip-rule="evenodd"
                    d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                    fill="currentColor"
                    fill-rule="evenodd"
                  />
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
        >
          <span
            class="Skeleton-skeleton-id"
            data-test-id="skeleton"
          >
            ‌
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Customers / Address Book no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="CustomerAddressListPage-empty-id"
    >
      <div
        class="MuiTypography-root-id MuiTypography-h5-id"
      >
        There is no address to show for this customer
      </div>
      <div
        class="MuiTypography-root-id CustomerAddressListPage-description-id MuiTypography-body1-id"
      >
        This customer doesn’t have any adresses added to his address book. You can add address using the button below.
      </div>
      <button
        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id CustomerAddressListPage-addButton-id MuiButton-containedPrimary-id"
        tabindex="0"
        type="button"
      >
        <span
          class="MuiButton-label-id"
        >
          Add address
        </span>
      </button>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Customers / Create customer default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Create Customer
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Customer Overview
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="CustomerCreateDetails-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    First Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="customerFirstName"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          First Name
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Last Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="customerLastName"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Last Name
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Email address
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="email"
                      type="email"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Email address
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id CustomerCreateAddress-overflow-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Primary Address
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id CustomerCreateAddress-overflow-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                The primary address of this customer.
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      First Name
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        autocomplete="new-password"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="firstName"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            First Name
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      Last Name
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        autocomplete="new-password"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="lastName"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            Last Name
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      Company
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        autocomplete="new-password"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="companyName"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            Company
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      Phone
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        autocomplete="new-password"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="phone"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            Phone
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Address line 1
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="new-password"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="streetAddress1"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Address line 1
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Address line 2
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="new-password"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="streetAddress2"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Address line 2
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      City
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        autocomplete="new-password"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="city"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            City
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      ZIP / Postal code
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        autocomplete="new-password"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="postalCode"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            ZIP / Postal code
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-68-label"
                    class="SingleAutocompleteSelectField-container-id"
                    data-test-id="address-edit-country-select-field"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Country
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-68-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-68-input"
                          type="text"
                          value=""
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="SingleAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Country
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      Country area
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        autocomplete="new-password"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="countryArea"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            Country area
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Notes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Enter any extra infotmation regarding this customer.
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Note
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    name="note"
                    rows="1"
                  />
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Note
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Customers / Create customer form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Create Customer
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Customer Overview
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="CustomerCreateDetails-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    First Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="customerFirstName"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          First Name
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Last Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="customerLastName"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Last Name
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                    data-shrink="false"
                  >
                    Email address
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="email"
                      type="email"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Email address
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Invalid value
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id CustomerCreateAddress-overflow-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Primary Address
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id CustomerCreateAddress-overflow-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                The primary address of this customer.
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                      data-shrink="false"
                    >
                      First Name
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="true"
                        autocomplete="new-password"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="firstName"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            First Name
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                    >
                      Invalid value
                    </p>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                      data-shrink="false"
                    >
                      Last Name
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="true"
                        autocomplete="new-password"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="lastName"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            Last Name
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                    >
                      Invalid value
                    </p>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                      data-shrink="false"
                    >
                      Company
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="true"
                        autocomplete="new-password"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="companyName"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            Company
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                    >
                      Invalid value
                    </p>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                      data-shrink="false"
                    >
                      Phone
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="true"
                        autocomplete="new-password"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="phone"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            Phone
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                    >
                      Invalid value
                    </p>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                  data-shrink="false"
                >
                  Address line 1
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    autocomplete="new-password"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="streetAddress1"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Address line 1
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Invalid value
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                  data-shrink="false"
                >
                  Address line 2
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    autocomplete="new-password"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="streetAddress2"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Address line 2
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Invalid value
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                      data-shrink="false"
                    >
                      City
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="true"
                        autocomplete="new-password"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="city"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            City
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                    >
                      Invalid value
                    </p>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                      data-shrink="false"
                    >
                      ZIP / Postal code
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="true"
                        autocomplete="new-password"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="postalCode"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            ZIP / Postal code
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                    >
                      Invalid value
                    </p>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-70-label"
                    class="SingleAutocompleteSelectField-container-id"
                    data-test-id="address-edit-country-select-field"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                        data-shrink="false"
                      >
                        Country
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="true"
                          aria-labelledby="downshift-70-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-70-input"
                          type="text"
                          value=""
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="SingleAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Country
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                      <p
                        class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                      >
                        Invalid value
                      </p>
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                      data-shrink="false"
                    >
                      Country area
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="true"
                        autocomplete="new-password"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="countryArea"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            Country area
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                    >
                      Invalid value
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Notes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Enter any extra infotmation regarding this customer.
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                  data-shrink="false"
                >
                  Note
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    name="note"
                    rows="1"
                  />
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Note
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Invalid value
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Customers / Create customer loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Create Customer
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Customer Overview
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="CustomerCreateDetails-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    First Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="customerFirstName"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          First Name
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Last Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="customerLastName"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Last Name
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Email address
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="email"
                      type="email"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Email address
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id CustomerCreateAddress-overflow-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Primary Address
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id CustomerCreateAddress-overflow-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                The primary address of this customer.
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                      data-shrink="false"
                    >
                      First Name
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        autocomplete="new-password"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="firstName"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            First Name
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                      data-shrink="false"
                    >
                      Last Name
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        autocomplete="new-password"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="lastName"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            Last Name
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                      data-shrink="false"
                    >
                      Company
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        autocomplete="new-password"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="companyName"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            Company
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                      data-shrink="false"
                    >
                      Phone
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        autocomplete="new-password"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="phone"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            Phone
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Address line 1
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="new-password"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="streetAddress1"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Address line 1
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Address line 2
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="new-password"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="streetAddress2"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Address line 2
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                      data-shrink="false"
                    >
                      City
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        autocomplete="new-password"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="city"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            City
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                      data-shrink="false"
                    >
                      ZIP / Postal code
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        autocomplete="new-password"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="postalCode"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            ZIP / Postal code
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-69-label"
                    class="SingleAutocompleteSelectField-container-id"
                    data-test-id="address-edit-country-select-field"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                        data-shrink="false"
                      >
                        Country
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-69-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          disabled=""
                          id="downshift-69-input"
                          type="text"
                          value=""
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="SingleAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Country
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                      data-shrink="false"
                    >
                      Country area
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        autocomplete="new-password"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="countryArea"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            Country area
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Notes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Enter any extra infotmation regarding this customer.
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Note
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    disabled=""
                    name="note"
                    rows="1"
                  />
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Note
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Customers / Customer details default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Tom Cooper
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id CustomerDetails-cardTitle-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  elizabeth.vaughn@example.com
                  <div
                    class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
                  >
                    Active member since May 2017
                  </div>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id CustomerDetails-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="isActive"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  User account active
                </span>
              </label>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Note
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    name="note"
                    rows="1"
                  />
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Note
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Account Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id CustomerInfo-content-id"
            >
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                General Information
              </div>
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    First Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="firstName"
                      type="text"
                      value="Tom"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          First Name
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Last Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="lastName"
                      type="text"
                      value="Cooper"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Last Name
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id CustomerInfo-hr-id"
              />
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                Contact Information
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Email address
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="email"
                    type="email"
                    value="elizabeth.vaughn@example.com"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Email address
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Recent Orders
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <a
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  href="/orders?customer=elizabeth.vaughn%40example.com"
                  role="button"
                  tabindex="0"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    View all orders
                  </span>
                </a>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <a
                class="TableRowLink-link-id"
                href="/orders/T3JkZXI6MTk%3D"
              />
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      No. of Order
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Date
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Status
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id CustomerOrders-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      #8234
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <time
                        class=""
                        datetime="1525685850124"
                        title="May 7, 2018 5:37 AM"
                      >
                        3 months ago
                      </time>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiChip-root-id Pill-root-id Pill-success-id"
                      >
                        <span
                          class="MuiChip-label-id Pill-label-id"
                        >
                          Fully paid
                        </span>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      1,215.89
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Address Information
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <a
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="manage-addresses"
                  href="/customers/123/addresses"
                  role="button"
                  tabindex="0"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Manage
                  </span>
                </a>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
              >
                Address
              </div>
              <address
                style="font-style:inherit"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Elizabeth Vaughn
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                />
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  419 Ruiz Orchard Apt. 199
                  <br />
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                   52203 Port Danielshire
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Szwecja
                </p>
              </address>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Customer History
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last login
              </div>
              <div
                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last order
              </div>
              <div
                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Gift Cards
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <div
                  class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                  >
                    Preview
                  </span>
                </div>
              </div>
            </div>
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
            >
              ‌
            </span>
            <div
              class="MuiCardActions-root-id CustomerGiftCardsCard-cardActions-id CustomerGiftCardsCard-cardActions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Issue new card
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Customers / Customer details different addresses 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Tom Cooper
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id CustomerDetails-cardTitle-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  elizabeth.vaughn@example.com
                  <div
                    class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
                  >
                    Active member since May 2017
                  </div>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id CustomerDetails-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="isActive"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  User account active
                </span>
              </label>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Note
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    name="note"
                    rows="1"
                  />
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Note
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Account Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id CustomerInfo-content-id"
            >
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                General Information
              </div>
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    First Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="firstName"
                      type="text"
                      value="Tom"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          First Name
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Last Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="lastName"
                      type="text"
                      value="Cooper"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Last Name
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id CustomerInfo-hr-id"
              />
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                Contact Information
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Email address
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="email"
                    type="email"
                    value="elizabeth.vaughn@example.com"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Email address
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Recent Orders
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <a
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  href="/orders?customer=elizabeth.vaughn%40example.com"
                  role="button"
                  tabindex="0"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    View all orders
                  </span>
                </a>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <a
                class="TableRowLink-link-id"
                href="/orders/T3JkZXI6MTk%3D"
              />
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      No. of Order
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Date
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Status
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id CustomerOrders-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      #8234
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <time
                        class=""
                        datetime="1525685850124"
                        title="May 7, 2018 5:37 AM"
                      >
                        3 months ago
                      </time>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiChip-root-id Pill-root-id Pill-success-id"
                      >
                        <span
                          class="MuiChip-label-id Pill-label-id"
                        >
                          Fully paid
                        </span>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      1,215.89
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Address Information
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <a
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="manage-addresses"
                  href="/customers/123/addresses"
                  role="button"
                  tabindex="0"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Manage
                  </span>
                </a>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
              >
                Billing Address
              </div>
              <address
                style="font-style:inherit"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Elizabeth Vaughn
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                />
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  419 Ruiz Orchard Apt. 199
                  <br />
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                   52203 Port Danielshire
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Szwecja
                </p>
              </address>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
              >
                Shipping Address
              </div>
              <address
                style="font-style:inherit"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Elizabeth Vaughn
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                />
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  419 Ruiz Orchard Apt. 199
                  <br />
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                   52203 Port Danielshire
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Szwecja
                </p>
              </address>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Customer History
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last login
              </div>
              <div
                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last order
              </div>
              <div
                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Gift Cards
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <div
                  class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                  >
                    Preview
                  </span>
                </div>
              </div>
            </div>
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
            >
              ‌
            </span>
            <div
              class="MuiCardActions-root-id CustomerGiftCardsCard-cardActions-id CustomerGiftCardsCard-cardActions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Issue new card
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Tom Cooper
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id CustomerDetails-cardTitle-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  elizabeth.vaughn@example.com
                  <div
                    class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
                  >
                    Active member since May 2017
                  </div>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id CustomerDetails-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="isActive"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  User account active
                </span>
              </label>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Note
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    name="note"
                    rows="1"
                  />
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Note
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Account Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id CustomerInfo-content-id"
            >
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                General Information
              </div>
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    First Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="firstName"
                      type="text"
                      value="Tom"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          First Name
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                  >
                    Invalid value
                  </p>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Last Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="lastName"
                      type="text"
                      value="Cooper"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Last Name
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                  >
                    Invalid value
                  </p>
                </div>
              </div>
              <hr
                class="Hr-root-id CustomerInfo-hr-id"
              />
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                Contact Information
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Email address
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="email"
                    type="email"
                    value="elizabeth.vaughn@example.com"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Email address
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Invalid value
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Recent Orders
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <a
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  href="/orders?customer=elizabeth.vaughn%40example.com"
                  role="button"
                  tabindex="0"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    View all orders
                  </span>
                </a>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <a
                class="TableRowLink-link-id"
                href="/orders/T3JkZXI6MTk%3D"
              />
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      No. of Order
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Date
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Status
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id CustomerOrders-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      #8234
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <time
                        class=""
                        datetime="1525685850124"
                        title="May 7, 2018 5:37 AM"
                      >
                        3 months ago
                      </time>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiChip-root-id Pill-root-id Pill-success-id"
                      >
                        <span
                          class="MuiChip-label-id Pill-label-id"
                        >
                          Fully paid
                        </span>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      1,215.89
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Address Information
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <a
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="manage-addresses"
                  href="/customers/123/addresses"
                  role="button"
                  tabindex="0"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Manage
                  </span>
                </a>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
              >
                Address
              </div>
              <address
                style="font-style:inherit"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Elizabeth Vaughn
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                />
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  419 Ruiz Orchard Apt. 199
                  <br />
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                   52203 Port Danielshire
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Szwecja
                </p>
              </address>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Customer History
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last login
              </div>
              <div
                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last order
              </div>
              <div
                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Gift Cards
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <div
                  class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                  >
                    Preview
                  </span>
                </div>
              </div>
            </div>
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
            >
              ‌
            </span>
            <div
              class="MuiCardActions-root-id CustomerGiftCardsCard-cardActions-id CustomerGiftCardsCard-cardActions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Issue new card
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Customers / Customer details loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
              style="width:10em"
            >
              ‌
            </span>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id CustomerDetails-cardTitle-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                    data-test-id="skeleton"
                  >
                    ‌
                  </span>
                  <span
                    class="Skeleton-skeleton-id"
                    data-test-id="skeleton"
                    style="width:10rem"
                  >
                    ‌
                  </span>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id CustomerDetails-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id MuiFormControlLabel-disabled-id"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      name="isActive"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  User account active
                </span>
              </label>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Note
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    disabled=""
                    name="note"
                    rows="1"
                  />
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Note
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Account Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id CustomerInfo-content-id"
            >
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                General Information
              </div>
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    First Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="firstName"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          First Name
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Last Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="lastName"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Last Name
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id CustomerInfo-hr-id"
              />
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                Contact Information
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Email address
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="email"
                    type="email"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Email address
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Recent Orders
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <a
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  href="/orders"
                  role="button"
                  tabindex="0"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    View all orders
                  </span>
                </a>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      No. of Order
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Date
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Status
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Address Information
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <a
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  data-test-id="manage-addresses"
                  href="/customers/123/addresses"
                  role="button"
                  tabindex="-1"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Manage
                  </span>
                </a>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
              >
                Address
              </div>
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Customer History
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last login
              </div>
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last order
              </div>
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Gift Cards
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <div
                  class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                  >
                    Preview
                  </span>
                </div>
              </div>
            </div>
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
            >
              ‌
            </span>
            <div
              class="MuiCardActions-root-id CustomerGiftCardsCard-cardActions-id CustomerGiftCardsCard-cardActions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Issue new card
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Tom Cooper
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id CustomerDetails-cardTitle-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  elizabeth.vaughn@example.com
                  <div
                    class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
                  >
                    Active member since May 2017
                  </div>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id CustomerDetails-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="isActive"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  User account active
                </span>
              </label>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Note
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    name="note"
                    rows="1"
                  />
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Note
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Account Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id CustomerInfo-content-id"
            >
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                General Information
              </div>
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    First Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="firstName"
                      type="text"
                      value="Tom"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          First Name
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Last Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="lastName"
                      type="text"
                      value="Cooper"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Last Name
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id CustomerInfo-hr-id"
              />
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                Contact Information
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Email address
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="email"
                    type="email"
                    value="elizabeth.vaughn@example.com"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Email address
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Recent Orders
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <a
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  href="/orders?customer=elizabeth.vaughn%40example.com"
                  role="button"
                  tabindex="0"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    View all orders
                  </span>
                </a>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <a
                class="TableRowLink-link-id"
                href="/orders/T3JkZXI6MTk%3D"
              />
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      No. of Order
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Date
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Status
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id CustomerOrders-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      #8234
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <time
                        class=""
                        datetime="1525685850124"
                        title="May 7, 2018 5:37 AM"
                      >
                        3 months ago
                      </time>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiChip-root-id Pill-root-id Pill-success-id"
                      >
                        <span
                          class="MuiChip-label-id Pill-label-id"
                        >
                          Fully paid
                        </span>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      1,215.89
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Address Information
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <a
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="manage-addresses"
                  href="/customers/123/addresses"
                  role="button"
                  tabindex="0"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Manage
                  </span>
                </a>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
              >
                Address
              </div>
              <address
                style="font-style:inherit"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Elizabeth Vaughn
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                />
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  419 Ruiz Orchard Apt. 199
                  <br />
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                   52203 Port Danielshire
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Szwecja
                </p>
              </address>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Customer History
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last login
              </div>
              <div
                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
              >
                -
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last order
              </div>
              <div
                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Gift Cards
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <div
                  class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                  >
                    Preview
                  </span>
                </div>
              </div>
            </div>
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
            >
              ‌
            </span>
            <div
              class="MuiCardActions-root-id CustomerGiftCardsCard-cardActions-id CustomerGiftCardsCard-cardActions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Issue new card
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Customers / Customer details never placed order 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Tom Cooper
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id CustomerDetails-cardTitle-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  elizabeth.vaughn@example.com
                  <div
                    class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
                  >
                    Active member since May 2017
                  </div>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id CustomerDetails-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="isActive"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  User account active
                </span>
              </label>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Note
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    name="note"
                    rows="1"
                  />
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Note
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Account Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id CustomerInfo-content-id"
            >
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                General Information
              </div>
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    First Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="firstName"
                      type="text"
                      value="Tom"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          First Name
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Last Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="lastName"
                      type="text"
                      value="Cooper"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Last Name
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id CustomerInfo-hr-id"
              />
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                Contact Information
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Email address
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="email"
                    type="email"
                    value="elizabeth.vaughn@example.com"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Email address
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Recent Orders
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <a
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  href="/orders?customer=elizabeth.vaughn%40example.com"
                  role="button"
                  tabindex="0"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    View all orders
                  </span>
                </a>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <a
                class="TableRowLink-link-id"
                href="/orders/T3JkZXI6MTk%3D"
              />
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      No. of Order
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Date
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Status
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id CustomerOrders-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      #8234
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <time
                        class=""
                        datetime="1525685850124"
                        title="May 7, 2018 5:37 AM"
                      >
                        3 months ago
                      </time>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiChip-root-id Pill-root-id Pill-success-id"
                      >
                        <span
                          class="MuiChip-label-id Pill-label-id"
                        >
                          Fully paid
                        </span>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      1,215.89
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Address Information
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <a
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="manage-addresses"
                  href="/customers/123/addresses"
                  role="button"
                  tabindex="0"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Manage
                  </span>
                </a>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
              >
                Address
              </div>
              <address
                style="font-style:inherit"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Elizabeth Vaughn
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                />
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  419 Ruiz Orchard Apt. 199
                  <br />
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                   52203 Port Danielshire
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Szwecja
                </p>
              </address>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Customer History
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last login
              </div>
              <div
                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last order
              </div>
              <div
                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
              >
                -
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Gift Cards
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <div
                  class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                  >
                    Preview
                  </span>
                </div>
              </div>
            </div>
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
            >
              ‌
            </span>
            <div
              class="MuiCardActions-root-id CustomerGiftCardsCard-cardActions-id CustomerGiftCardsCard-cardActions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Issue new card
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Customers / Customer details no address at all 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Tom Cooper
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id CustomerDetails-cardTitle-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  elizabeth.vaughn@example.com
                  <div
                    class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
                  >
                    Active member since May 2017
                  </div>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id CustomerDetails-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="isActive"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  User account active
                </span>
              </label>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Note
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    name="note"
                    rows="1"
                  />
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Note
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Account Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id CustomerInfo-content-id"
            >
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                General Information
              </div>
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    First Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="firstName"
                      type="text"
                      value="Tom"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          First Name
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Last Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="lastName"
                      type="text"
                      value="Cooper"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Last Name
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id CustomerInfo-hr-id"
              />
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                Contact Information
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Email address
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="email"
                    type="email"
                    value="elizabeth.vaughn@example.com"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Email address
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Recent Orders
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <a
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  href="/orders?customer=elizabeth.vaughn%40example.com"
                  role="button"
                  tabindex="0"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    View all orders
                  </span>
                </a>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <a
                class="TableRowLink-link-id"
                href="/orders/T3JkZXI6MTk%3D"
              />
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      No. of Order
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Date
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Status
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id CustomerOrders-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      #8234
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <time
                        class=""
                        datetime="1525685850124"
                        title="May 7, 2018 5:37 AM"
                      >
                        3 months ago
                      </time>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiChip-root-id Pill-root-id Pill-success-id"
                      >
                        <span
                          class="MuiChip-label-id Pill-label-id"
                        >
                          Fully paid
                        </span>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      1,215.89
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Address Information
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <a
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="manage-addresses"
                  href="/customers/123/addresses"
                  role="button"
                  tabindex="0"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Manage
                  </span>
                </a>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                This customer has no addresses yet
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Customer History
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last login
              </div>
              <div
                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last order
              </div>
              <div
                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Gift Cards
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <div
                  class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                  >
                    Preview
                  </span>
                </div>
              </div>
            </div>
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
            >
              ‌
            </span>
            <div
              class="MuiCardActions-root-id CustomerGiftCardsCard-cardActions-id CustomerGiftCardsCard-cardActions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Issue new card
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Customers / Customer details no default billing address 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Tom Cooper
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id CustomerDetails-cardTitle-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  elizabeth.vaughn@example.com
                  <div
                    class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
                  >
                    Active member since May 2017
                  </div>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id CustomerDetails-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="isActive"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  User account active
                </span>
              </label>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Note
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    name="note"
                    rows="1"
                  />
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Note
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Account Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id CustomerInfo-content-id"
            >
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                General Information
              </div>
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    First Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="firstName"
                      type="text"
                      value="Tom"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          First Name
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Last Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="lastName"
                      type="text"
                      value="Cooper"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Last Name
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id CustomerInfo-hr-id"
              />
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                Contact Information
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Email address
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="email"
                    type="email"
                    value="elizabeth.vaughn@example.com"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Email address
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Recent Orders
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <a
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  href="/orders?customer=elizabeth.vaughn%40example.com"
                  role="button"
                  tabindex="0"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    View all orders
                  </span>
                </a>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <a
                class="TableRowLink-link-id"
                href="/orders/T3JkZXI6MTk%3D"
              />
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      No. of Order
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Date
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Status
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id CustomerOrders-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      #8234
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <time
                        class=""
                        datetime="1525685850124"
                        title="May 7, 2018 5:37 AM"
                      >
                        3 months ago
                      </time>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiChip-root-id Pill-root-id Pill-success-id"
                      >
                        <span
                          class="MuiChip-label-id Pill-label-id"
                        >
                          Fully paid
                        </span>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      1,215.89
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Address Information
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <a
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="manage-addresses"
                  href="/customers/123/addresses"
                  role="button"
                  tabindex="0"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Manage
                  </span>
                </a>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
              >
                Shipping Address
              </div>
              <address
                style="font-style:inherit"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Elizabeth Vaughn
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                />
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  419 Ruiz Orchard Apt. 199
                  <br />
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                   52203 Port Danielshire
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Szwecja
                </p>
              </address>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Customer History
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last login
              </div>
              <div
                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last order
              </div>
              <div
                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Gift Cards
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <div
                  class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                  >
                    Preview
                  </span>
                </div>
              </div>
            </div>
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
            >
              ‌
            </span>
            <div
              class="MuiCardActions-root-id CustomerGiftCardsCard-cardActions-id CustomerGiftCardsCard-cardActions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Issue new card
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Customers / Customer details no default shipping address 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Tom Cooper
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id CustomerDetails-cardTitle-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  elizabeth.vaughn@example.com
                  <div
                    class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
                  >
                    Active member since May 2017
                  </div>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id CustomerDetails-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="isActive"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  User account active
                </span>
              </label>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Note
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    name="note"
                    rows="1"
                  />
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Note
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Account Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id CustomerInfo-content-id"
            >
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                General Information
              </div>
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    First Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="firstName"
                      type="text"
                      value="Tom"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          First Name
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Last Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="lastName"
                      type="text"
                      value="Cooper"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Last Name
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id CustomerInfo-hr-id"
              />
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                Contact Information
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Email address
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="email"
                    type="email"
                    value="elizabeth.vaughn@example.com"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Email address
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Recent Orders
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <a
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  href="/orders?customer=elizabeth.vaughn%40example.com"
                  role="button"
                  tabindex="0"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    View all orders
                  </span>
                </a>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <a
                class="TableRowLink-link-id"
                href="/orders/T3JkZXI6MTk%3D"
              />
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      No. of Order
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Date
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Status
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id CustomerOrders-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      #8234
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <time
                        class=""
                        datetime="1525685850124"
                        title="May 7, 2018 5:37 AM"
                      >
                        3 months ago
                      </time>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiChip-root-id Pill-root-id Pill-success-id"
                      >
                        <span
                          class="MuiChip-label-id Pill-label-id"
                        >
                          Fully paid
                        </span>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      1,215.89
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Address Information
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <a
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="manage-addresses"
                  href="/customers/123/addresses"
                  role="button"
                  tabindex="0"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Manage
                  </span>
                </a>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
              >
                Billing Address
              </div>
              <address
                style="font-style:inherit"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Elizabeth Vaughn
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                />
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  419 Ruiz Orchard Apt. 199
                  <br />
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                   52203 Port Danielshire
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Szwecja
                </p>
              </address>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Customer History
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last login
              </div>
              <div
                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last order
              </div>
              <div
                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Gift Cards
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <div
                  class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                  >
                    Preview
                  </span>
                </div>
              </div>
            </div>
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
            >
              ‌
            </span>
            <div
              class="MuiCardActions-root-id CustomerGiftCardsCard-cardActions-id CustomerGiftCardsCard-cardActions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Issue new card
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Customers / Customer list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Customers
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-customer"
            href="/customers/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create customer
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Customers
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Customer"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <a
          class="TableRowLink-link-id"
          href="/customers/VXNlcjox"
        />
        <a
          class="TableRowLink-link-id"
          href="/customers/VXNlcjox"
        />
        <a
          class="TableRowLink-link-id"
          href="/customers/VXNlcjoy"
        />
        <a
          class="TableRowLink-link-id"
          href="/customers/VXNlcjoz"
        />
        <a
          class="TableRowLink-link-id"
          href="/customers/VXNlcjo0"
        />
        <a
          class="TableRowLink-link-id"
          href="/customers/VXNlcjo1"
        />
        <a
          class="TableRowLink-link-id"
          href="/customers/VXNlcjo2"
        />
        <a
          class="TableRowLink-link-id"
          href="/customers/VXNlcjo3"
        />
        <a
          class="TableRowLink-link-id"
          href="/customers/VXNlcjo3"
        />
        <a
          class="TableRowLink-link-id"
          href="/customers/VXNlcjo4"
        />
        <a
          class="TableRowLink-link-id"
          href="/customers/VXNlcjo5"
        />
        <a
          class="TableRowLink-link-id"
          href="/customers/VXNlcjoxMA%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/customers/VXNlcjoxMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/customers/VXNlcjoxMg%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/customers/VXNlcjoxMw%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/customers/VXNlcjoxNA%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/customers/VXNlcjoxNQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/customers/VXNlcjoxNg%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/customers/VXNlcjoxNg%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/customers/VXNlcjoxNw%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/customers/VXNlcjoxOA%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/customers/VXNlcjoxOQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/customers/VXNlcjoyMA%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/customers/VXNlcjoyMQ%3D%3D"
        />
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CustomerList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Customer Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CustomerList-colEmail-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Customer Email
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CustomerList-colOrders-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Orders
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
              >
                curtis Bailey
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
              >
                Curtis.bailey@example.com
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
              >
                2
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
              >
                Curtis Bailey
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
              >
                curtis.bailey@example.com
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
              >
                2
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
              >
                Elizabeth Vaughn
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
              >
                elizabeth.vaughn@example.com
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
              >
                1
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
              >
                Michael Martinez
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
              >
                michael.martinez@example.com
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
              >
                1
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
              >
                Kayla Griffin
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
              >
                kayla.griffin@example.com
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
              >
                0
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
              >
                Donna Robinson
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
              >
                donna.robinson@example.com
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
              >
                0
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
              >
                James Bqall
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
              >
                james.ball@example.com
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
              >
                1
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
              >
                Anthony Gonzalez
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
              >
                anthony.gonzalez@example.com
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
              >
                2
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
              >
                Anthony Gonzalez
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
              >
                anthony.gonzalez@example.com
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
              >
                2
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
              >
                Wesley Davis
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
              >
                wesley.davis@example.com
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
              >
                1
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
              >
                Laura Stone
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
              >
                laura.stone@example.com
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
              >
                1
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
              >
                William Miller
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
              >
                william.miller@example.com
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
              >
                0
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
              >
                Donald Solomon
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
              >
                donald.solomon@example.com
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
              >
                0
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
              >
                Anthony Young
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
              >
                anthony.young@example.com
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
              >
                0
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
              >
                Hanson Sharon
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
              >
                sharon.hanson@example.com
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
              >
                0
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
              >
                Laura Jensen
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
              >
                laura.jensen@example.com
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
              >
                1
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
              >
                Mark Lee
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
              >
                mark.lee@example.com
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
              >
                1
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
              >
                David Lawson
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
              >
                david.lawson@example.com
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
              >
                2
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
              >
                David Lawson
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
              >
                david.lawson@example.com
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
              >
                2
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
              >
                Faith Smith
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
              >
                faith.smith@example.com
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
              >
                0
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
              >
                John Jones
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
              >
                john.jones@example.com
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
              >
                0
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
              >
                Ronald Fisher
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
              >
                ronald.fisher@example.com
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
              >
                0
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
              >
                Jason Gray
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
              >
                jason.gray@example.com
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
              >
                0
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
              >
                Tom Cooper
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
              >
                admin@example.com
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
              >
                6
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Customers / Customer list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Customers
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-customer"
            href="/customers/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create customer
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Customers
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Customer"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CustomerList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Customer Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CustomerList-colEmail-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Customer Email
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CustomerList-colOrders-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Orders
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
              />
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Customers / Customer list no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Customers
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-customer"
            href="/customers/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create customer
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Customers
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Customer"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CustomerList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Customer Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CustomerList-colEmail-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Customer Email
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CustomerList-colOrders-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Orders
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
                colspan="4"
              >
                No customers found
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Discounts / Sale create default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Create Sale
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Discount Type
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id SaleType-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="type"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="PERCENTAGE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Percentage
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="FIXED"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Fixed Amount
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Value
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id SaleValue-card-id"
            >
              <div
                class="MuiTypography-root-id SaleValue-info-id MuiTypography-caption-id"
              >
                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id SaleValue-table-id"
              >
                <colgroup>
                  <col />
                  <col
                    class="SaleValue-colValue-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id SaleValue-colName-id"
                      scope="col"
                    >
                      <span>
                        Channel name
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id SaleValue-colType-id"
                      scope="col"
                    >
                      <span>
                        Value
                      </span>
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Test
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          euro
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          euro
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel test
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          euro
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel USD
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          euro
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          euro
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel test
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          euro
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel USD
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          euro
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Active Dates
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                    data-shrink="true"
                  >
                    Start Date
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startDate"
                      type="date"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Start Date
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                    data-shrink="true"
                  >
                    Start Hour
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startTime"
                      type="time"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Start Hour
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="hasEndDate"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Set end date
                </span>
              </label>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 7 out of 7 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel USD
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel USD
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="false"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="true"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Private Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Discounts / Sale create form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Create Sale
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                  data-shrink="false"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Invalid value
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Discount Type
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id SaleType-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="type"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="PERCENTAGE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Percentage
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="FIXED"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Fixed Amount
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Value
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id SaleValue-card-id"
            >
              <div
                class="MuiTypography-root-id SaleValue-info-id MuiTypography-caption-id"
              >
                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id SaleValue-table-id"
              >
                <colgroup>
                  <col />
                  <col
                    class="SaleValue-colValue-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id SaleValue-colName-id"
                      scope="col"
                    >
                      <span>
                        Channel name
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id SaleValue-colType-id"
                      scope="col"
                    >
                      <span>
                        Value
                      </span>
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Test
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          euro
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          euro
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel test
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          euro
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel USD
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          euro
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          euro
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel test
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          euro
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel USD
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          euro
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Active Dates
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                    data-shrink="true"
                  >
                    Start Date
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startDate"
                      type="date"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Start Date
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Invalid value
                  </p>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                    data-shrink="true"
                  >
                    Start Hour
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startTime"
                      type="time"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Start Hour
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Invalid value
                  </p>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="hasEndDate"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Set end date
                </span>
              </label>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 7 out of 7 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel USD
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel USD
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="false"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="true"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Private Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Discounts / Sale create loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Create Sale
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Discount Type
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id SaleType-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="type"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="type"
                          type="radio"
                          value="PERCENTAGE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      Percentage
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="type"
                          type="radio"
                          value="FIXED"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      Fixed Amount
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Value
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id SaleValue-card-id"
            >
              <div
                class="MuiTypography-root-id SaleValue-info-id MuiTypography-caption-id"
              >
                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id SaleValue-table-id"
              >
                <colgroup>
                  <col />
                  <col
                    class="SaleValue-colValue-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id SaleValue-colName-id"
                      scope="col"
                    >
                      <span>
                        Channel name
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id SaleValue-colType-id"
                      scope="col"
                    >
                      <span>
                        Value
                      </span>
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Test
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            disabled=""
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          euro
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            disabled=""
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          euro
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel test
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            disabled=""
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          euro
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel USD
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            disabled=""
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          euro
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            disabled=""
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          euro
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel test
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            disabled=""
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          euro
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel USD
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            disabled=""
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          euro
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Active Dates
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="true"
                  >
                    Start Date
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="startDate"
                      type="date"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Start Date
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="true"
                  >
                    Start Hour
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="startTime"
                      type="time"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Start Hour
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="hasEndDate"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Set end date
                </span>
              </label>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 7 out of 7 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel USD
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel USD
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="false"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="true"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Private Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Happy minute day!
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Happy minute day!"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Discount Type
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id SaleType-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="type"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="PERCENTAGE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Percentage
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="FIXED"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Fixed Amount
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Value
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id SaleValue-card-id"
            >
              <div
                class="MuiTypography-root-id SaleValue-info-id MuiTypography-caption-id"
              >
                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id SaleValue-table-id"
              >
                <colgroup>
                  <col />
                  <col
                    class="SaleValue-colValue-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id SaleValue-colName-id"
                      scope="col"
                    >
                      <span>
                        Channel name
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id SaleValue-colType-id"
                      scope="col"
                    >
                      <span>
                        Value
                      </span>
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Test
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          %
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          %
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel test
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          %
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel USD
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          %
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          %
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel test
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          %
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel USD
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          %
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="TabContainer-root-id"
          >
            <span
              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
            >
              Categories (2)
            </span>
            <span
              class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
            >
              Collections (4)
            </span>
            <span
              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
              data-test-id="products-tab"
            >
              Products (4)
            </span>
            <span
              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
              data-test-id="variants-tab"
            >
              Variants (3)
            </span>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Eligible Collections
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign collections
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <a
                class="TableRowLink-link-id"
                href="/collections/U2FsZBo4%3D"
              />
              <table
                class="MuiTable-root-id"
              >
                <colgroup>
                  <col />
                  <col
                    class="DiscountCollections-colName-id"
                  />
                  <col
                    class="DiscountCollections-colProducts-id"
                  />
                  <col
                    class="DiscountCollections-colActions-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                      scope="col"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCollections-colName-id"
                      scope="col"
                    >
                      Collection Name
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCollections-colProducts-id"
                      scope="col"
                    >
                      Products
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tfoot
                  class="MuiTableFooter-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id"
                      colspan="4"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                      >
                        <div
                          class="Pagination-spacer-id"
                        />
                        <div
                          class="Pagination-actions-id"
                        >
                          <button
                            aria-label="previous page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                              />
                            </svg>
                          </button>
                          <button
                            aria-label="next page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-next"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                              />
                            </svg>
                          </button>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tfoot>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id DiscountCollections-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCollections-colName-id"
                    >
                      Winter Collection
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCollections-colProducts-id"
                    >
                      110
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCollections-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Active Dates
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Start Date
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startDate"
                      type="date"
                      value="2019-01-03"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Start Date
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Start Hour
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startTime"
                      type="time"
                      value="00:00"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Start Hour
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="hasEndDate"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Set end date
                </span>
              </label>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Summary
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Name
              </div>
              <div
                class="MuiTypography-root-id SaleSummary-ellipsis-id MuiTypography-body1-id"
              >
                Happy minute day!
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Value
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                1%
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Start Date
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Jan 3, 2019
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                End Date
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                -
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 7 out of 7 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel USD
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel USD
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="false"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="true"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Private Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Discounts / Sale details default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Happy minute day!
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Happy minute day!"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Discount Type
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id SaleType-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="type"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="PERCENTAGE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Percentage
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="FIXED"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Fixed Amount
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Value
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id SaleValue-card-id"
            >
              <div
                class="MuiTypography-root-id SaleValue-info-id MuiTypography-caption-id"
              >
                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id SaleValue-table-id"
              >
                <colgroup>
                  <col />
                  <col
                    class="SaleValue-colValue-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id SaleValue-colName-id"
                      scope="col"
                    >
                      <span>
                        Channel name
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id SaleValue-colType-id"
                      scope="col"
                    >
                      <span>
                        Value
                      </span>
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Test
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          %
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          %
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel test
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          %
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel USD
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          %
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          %
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel test
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          %
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel USD
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          %
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="TabContainer-root-id"
          >
            <span
              class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
            >
              Categories (2)
            </span>
            <span
              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
            >
              Collections (4)
            </span>
            <span
              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
              data-test-id="products-tab"
            >
              Products (4)
            </span>
            <span
              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
              data-test-id="variants-tab"
            >
              Variants (3)
            </span>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Eligible Categories
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign categories
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <a
                class="TableRowLink-link-id"
                href="/categories/U2FsZTo1%3D"
              />
              <table
                class="MuiTable-root-id"
              >
                <colgroup>
                  <col />
                  <col
                    class="DiscountCategories-colName-id"
                  />
                  <col
                    class="DiscountCategories-colProducts-id"
                  />
                  <col
                    class="DiscountCategories-colActions-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                      scope="col"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-colName-id"
                      scope="col"
                    >
                      Category Name
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-colProducts-id"
                      scope="col"
                    >
                      Products
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tfoot
                  class="MuiTableFooter-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id"
                      colspan="4"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                      >
                        <div
                          class="Pagination-spacer-id"
                        />
                        <div
                          class="Pagination-actions-id"
                        >
                          <button
                            aria-label="previous page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                              />
                            </svg>
                          </button>
                          <button
                            aria-label="next page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-next"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                              />
                            </svg>
                          </button>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tfoot>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id DiscountCategories-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Apparel
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-colProducts-id"
                    >
                      18
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Active Dates
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Start Date
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startDate"
                      type="date"
                      value="2019-01-03"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Start Date
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Start Hour
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startTime"
                      type="time"
                      value="00:00"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Start Hour
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="hasEndDate"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Set end date
                </span>
              </label>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Summary
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Name
              </div>
              <div
                class="MuiTypography-root-id SaleSummary-ellipsis-id MuiTypography-body1-id"
              >
                Happy minute day!
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Value
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                1%
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Start Date
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Jan 3, 2019
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                End Date
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                -
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 7 out of 7 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel USD
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel USD
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="false"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="true"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Private Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Happy minute day!
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Happy minute day!"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Invalid value
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Discount Type
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id SaleType-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="type"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="PERCENTAGE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Percentage
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="FIXED"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Fixed Amount
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Value
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id SaleValue-card-id"
            >
              <div
                class="MuiTypography-root-id SaleValue-info-id MuiTypography-caption-id"
              >
                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id SaleValue-table-id"
              >
                <colgroup>
                  <col />
                  <col
                    class="SaleValue-colValue-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id SaleValue-colName-id"
                      scope="col"
                    >
                      <span>
                        Channel name
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id SaleValue-colType-id"
                      scope="col"
                    >
                      <span>
                        Value
                      </span>
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Test
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          %
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          %
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel test
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          %
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel USD
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          %
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          %
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel test
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          %
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel USD
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          %
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="TabContainer-root-id"
          >
            <span
              class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
            >
              Categories (2)
            </span>
            <span
              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
            >
              Collections (4)
            </span>
            <span
              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
              data-test-id="products-tab"
            >
              Products (4)
            </span>
            <span
              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
              data-test-id="variants-tab"
            >
              Variants (3)
            </span>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Eligible Categories
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign categories
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <a
                class="TableRowLink-link-id"
                href="/categories/U2FsZTo1%3D"
              />
              <table
                class="MuiTable-root-id"
              >
                <colgroup>
                  <col />
                  <col
                    class="DiscountCategories-colName-id"
                  />
                  <col
                    class="DiscountCategories-colProducts-id"
                  />
                  <col
                    class="DiscountCategories-colActions-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                      scope="col"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-colName-id"
                      scope="col"
                    >
                      Category Name
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-colProducts-id"
                      scope="col"
                    >
                      Products
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tfoot
                  class="MuiTableFooter-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id"
                      colspan="4"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                      >
                        <div
                          class="Pagination-spacer-id"
                        />
                        <div
                          class="Pagination-actions-id"
                        >
                          <button
                            aria-label="previous page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                              />
                            </svg>
                          </button>
                          <button
                            aria-label="next page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-next"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                              />
                            </svg>
                          </button>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tfoot>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id DiscountCategories-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Apparel
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-colProducts-id"
                    >
                      18
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Active Dates
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Start Date
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startDate"
                      type="date"
                      value="2019-01-03"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Start Date
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                  >
                    Invalid value
                  </p>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Start Hour
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startTime"
                      type="time"
                      value="00:00"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Start Hour
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                  >
                    Invalid value
                  </p>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="hasEndDate"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Set end date
                </span>
              </label>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Summary
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Name
              </div>
              <div
                class="MuiTypography-root-id SaleSummary-ellipsis-id MuiTypography-body1-id"
              >
                Happy minute day!
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Value
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                1%
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Start Date
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Jan 3, 2019
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                End Date
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                -
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 7 out of 7 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel USD
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel USD
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="false"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="true"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Private Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
              style="width:10em"
            >
              ‌
            </span>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Discount Type
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id SaleType-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="type"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="type"
                          type="radio"
                          value="PERCENTAGE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      Percentage
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="type"
                          type="radio"
                          value="FIXED"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      Fixed Amount
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Value
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id SaleValue-card-id"
            >
              <div
                class="MuiTypography-root-id SaleValue-info-id MuiTypography-caption-id"
              >
                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id SaleValue-table-id"
              >
                <colgroup>
                  <col />
                  <col
                    class="SaleValue-colValue-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id SaleValue-colName-id"
                      scope="col"
                    >
                      <span>
                        Channel name
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id SaleValue-colType-id"
                      scope="col"
                    >
                      <span>
                        Value
                      </span>
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Test
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            disabled=""
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          euro
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            disabled=""
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          euro
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel test
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            disabled=""
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          euro
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel USD
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            disabled=""
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          euro
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            disabled=""
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          euro
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel test
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            disabled=""
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          euro
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel USD
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            disabled=""
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          euro
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="TabContainer-root-id"
          >
            <span
              class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
            >
              Categories (…)
            </span>
            <span
              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
            >
              Collections (…)
            </span>
            <span
              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
              data-test-id="products-tab"
            >
              Products (…)
            </span>
            <span
              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
              data-test-id="variants-tab"
            >
              Variants (…)
            </span>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Eligible Categories
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign categories
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <colgroup>
                  <col />
                  <col
                    class="DiscountCategories-colName-id"
                  />
                  <col
                    class="DiscountCategories-colProducts-id"
                  />
                  <col
                    class="DiscountCategories-colActions-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                      scope="col"
                    >
                      <span
                        aria-disabled="true"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        tabindex="-1"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            disabled=""
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-colName-id"
                      scope="col"
                    >
                      Category Name
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-colProducts-id"
                      scope="col"
                    >
                      Products
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tfoot
                  class="MuiTableFooter-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id"
                      colspan="4"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                      >
                        <div
                          class="Pagination-spacer-id"
                        />
                        <div
                          class="Pagination-actions-id"
                        >
                          <button
                            aria-label="previous page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                              />
                            </svg>
                          </button>
                          <button
                            aria-label="next page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-next"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                              />
                            </svg>
                          </button>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tfoot>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id DiscountCategories-tableRow-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="true"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        tabindex="-1"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            disabled=""
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-colProducts-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Active Dates
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="true"
                  >
                    Start Date
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="startDate"
                      type="date"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Start Date
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="true"
                  >
                    Start Hour
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="startTime"
                      type="time"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Start Hour
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="hasEndDate"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Set end date
                </span>
              </label>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Summary
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Name
              </div>
              <div
                class="MuiTypography-root-id SaleSummary-ellipsis-id MuiTypography-body1-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Value
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Start Date
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                End Date
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 7 out of 7 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel USD
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel USD
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="false"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
            >
              ‌
            </span>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="true"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Private Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
            >
              ‌
            </span>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Discounts / Sale details products 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Happy minute day!
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Happy minute day!"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Discount Type
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id SaleType-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="type"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="PERCENTAGE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Percentage
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="FIXED"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Fixed Amount
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Value
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id SaleValue-card-id"
            >
              <div
                class="MuiTypography-root-id SaleValue-info-id MuiTypography-caption-id"
              >
                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id SaleValue-table-id"
              >
                <colgroup>
                  <col />
                  <col
                    class="SaleValue-colValue-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id SaleValue-colName-id"
                      scope="col"
                    >
                      <span>
                        Channel name
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id SaleValue-colType-id"
                      scope="col"
                    >
                      <span>
                        Value
                      </span>
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Test
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          %
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          %
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel test
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          %
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel USD
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          %
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          %
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel test
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          %
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id SaleValue-row-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Channel USD
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Discount Value
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="value"
                            type="number"
                            value=""
                          />
                          %
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Discount Value
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="TabContainer-root-id"
          >
            <span
              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
            >
              Categories (2)
            </span>
            <span
              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
            >
              Collections (4)
            </span>
            <span
              class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
              data-test-id="products-tab"
            >
              Products (4)
            </span>
            <span
              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
              data-test-id="variants-tab"
            >
              Variants (3)
            </span>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Eligible Products
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="assign-products"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign products
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <a
                class="TableRowLink-link-id"
                href="/products/UHJvZHVjdDo3MQ%3D%3D"
              />
              <a
                class="TableRowLink-link-id"
                href="/products/UHJvZHVjdDo3Mw%3D%3D"
              />
              <a
                class="TableRowLink-link-id"
                href="/products/UHJvZHVjdDo3OQ%3D%3D"
              />
              <a
                class="TableRowLink-link-id"
                href="/products/UHJvZHVjdDoxMTU%3D"
              />
              <table
                class="MuiTable-root-id"
              >
                <colgroup>
                  <col />
                  <col
                    class="DiscountProducts-colName-id"
                  />
                  <col
                    class="DiscountProducts-colType-id"
                  />
                  <col
                    class="DiscountProducts-colPublished-id"
                  />
                  <col
                    class="DiscountProducts-colActions-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                      scope="col"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountProducts-colName-id"
                      scope="col"
                    >
                      <span
                        class="DiscountProducts-colNameLabel-id"
                      >
                        Product Name
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountProducts-colType-id"
                      scope="col"
                    >
                      Product Type
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountProducts-colPublished-id"
                      scope="col"
                    >
                      Availability
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountProducts-colActions-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tfoot
                  class="MuiTableFooter-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id"
                      colspan="5"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                      >
                        <div
                          class="Pagination-spacer-id"
                        />
                        <div
                          class="Pagination-actions-id"
                        >
                          <button
                            aria-label="previous page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                              />
                            </svg>
                          </button>
                          <button
                            aria-label="next page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-next"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                              />
                            </svg>
                          </button>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tfoot>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id DiscountProducts-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id DiscountProducts-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Orange Juice
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colType-id"
                    >
                      Juice
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colType-id"
                    >
                      <div>
                        <div
                          aria-controls="availability-menu"
                          aria-haspopup="true"
                          role="button"
                        >
                          <div
                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
                          >
                            <span
                              class="MuiChip-label-id Pill-label-id"
                            >
                              1 Channel
                            </span>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id DiscountProducts-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id DiscountProducts-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Carrot Juice
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colType-id"
                    >
                      Juice
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colType-id"
                    >
                      <div>
                        <div
                          aria-controls="availability-menu"
                          aria-haspopup="true"
                          role="button"
                        >
                          <div
                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
                          >
                            <span
                              class="MuiChip-label-id Pill-label-id"
                            >
                              1 Channel
                            </span>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id DiscountProducts-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id DiscountProducts-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Bean Juice
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colType-id"
                    >
                      Juice
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colType-id"
                    >
                      <div>
                        <div
                          aria-controls="availability-menu"
                          aria-haspopup="true"
                          role="button"
                        >
                          <div
                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
                          >
                            <span
                              class="MuiChip-label-id Pill-label-id"
                            >
                              1 Channel
                            </span>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id DiscountProducts-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id DiscountProducts-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Black Hoodie
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colType-id"
                    >
                      Top (clothing)
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colType-id"
                    >
                      <div>
                        <div
                          aria-controls="availability-menu"
                          aria-haspopup="true"
                          role="button"
                        >
                          <div
                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
                          >
                            <span
                              class="MuiChip-label-id Pill-label-id"
                            >
                              1 Channel
                            </span>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Active Dates
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Start Date
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startDate"
                      type="date"
                      value="2019-01-03"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Start Date
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Start Hour
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startTime"
                      type="time"
                      value="00:00"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Start Hour
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="hasEndDate"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Set end date
                </span>
              </label>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Summary
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Name
              </div>
              <div
                class="MuiTypography-root-id SaleSummary-ellipsis-id MuiTypography-body1-id"
              >
                Happy minute day!
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Value
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                1%
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Start Date
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Jan 3, 2019
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                End Date
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                -
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 7 out of 7 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel USD
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel USD
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="false"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="true"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Private Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Discounts / Sale list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Sales
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-sale"
            href="/discounts/sales/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Sale
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Sales
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Sale"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <a
          class="TableRowLink-link-id"
          href="/discounts/sales/U2FsZTo0"
        />
        <a
          class="TableRowLink-link-id"
          href="/discounts/sales/U2FsZTo1"
        />
        <a
          class="TableRowLink-link-id"
          href="/discounts/sales/U2FsZTox"
        />
        <a
          class="TableRowLink-link-id"
          href="/discounts/sales/U2FsZToy"
        />
        <a
          class="TableRowLink-link-id"
          href="/discounts/sales/U2FsZToz"
        />
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colStart-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Starts
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colEnd-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Ends
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colValue-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Value
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="5"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id SaleList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
              >
                Happy front day!
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colStart-id"
              >
                <time
                  class=""
                  datetime="2019-01-03"
                  title="Jan 3, 2019"
                >
                  in 5 months
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colEnd-id"
              >
                -
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colValue-id"
              >
                1%
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id SaleList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
              >
                Happy minute day!
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colStart-id"
              >
                <time
                  class=""
                  datetime="2019-01-03"
                  title="Jan 3, 2019"
                >
                  in 5 months
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colEnd-id"
              >
                -
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colValue-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                1.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id SaleList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
              >
                Happy class day!
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colStart-id"
              >
                <time
                  class=""
                  datetime="2019-01-03"
                  title="Jan 3, 2019"
                >
                  in 5 months
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colEnd-id"
              >
                -
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colValue-id"
              >
                1%
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id SaleList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
              >
                Happy human day!
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colStart-id"
              >
                <time
                  class=""
                  datetime="2019-01-03"
                  title="Jan 3, 2019"
                >
                  in 5 months
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colEnd-id"
              >
                -
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colValue-id"
              >
                1%
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id SaleList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
              >
                Happy year day!
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colStart-id"
              >
                <time
                  class=""
                  datetime="2019-01-03"
                  title="Jan 3, 2019"
                >
                  in 5 months
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colEnd-id"
              >
                -
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colValue-id"
              >
                1%
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Discounts / Sale list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Sales
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-sale"
            href="/discounts/sales/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Sale
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Sales
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Sale"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colStart-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Starts
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colEnd-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Ends
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colValue-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Value
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="5"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colStart-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colEnd-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colValue-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Discounts / Sale list no channels 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Sales
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-sale"
            href="/discounts/sales/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Sale
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Sales
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Sale"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <a
          class="TableRowLink-link-id"
          href="/discounts/sales/U2FsZTo0"
        />
        <a
          class="TableRowLink-link-id"
          href="/discounts/sales/U2FsZTo1"
        />
        <a
          class="TableRowLink-link-id"
          href="/discounts/sales/U2FsZTox"
        />
        <a
          class="TableRowLink-link-id"
          href="/discounts/sales/U2FsZToy"
        />
        <a
          class="TableRowLink-link-id"
          href="/discounts/sales/U2FsZToz"
        />
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colStart-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Starts
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colEnd-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Ends
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colValue-id TableCellHeader-disabled-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Value
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="5"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id SaleList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
              >
                Happy front day!
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colStart-id"
              >
                <time
                  class=""
                  datetime="2019-01-03"
                  title="Jan 3, 2019"
                >
                  in 5 months
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colEnd-id"
              >
                -
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colValue-id"
              >
                _
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id SaleList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
              >
                Happy minute day!
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colStart-id"
              >
                <time
                  class=""
                  datetime="2019-01-03"
                  title="Jan 3, 2019"
                >
                  in 5 months
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colEnd-id"
              >
                -
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colValue-id"
              >
                _
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id SaleList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
              >
                Happy class day!
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colStart-id"
              >
                <time
                  class=""
                  datetime="2019-01-03"
                  title="Jan 3, 2019"
                >
                  in 5 months
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colEnd-id"
              >
                -
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colValue-id"
              >
                _
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id SaleList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
              >
                Happy human day!
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colStart-id"
              >
                <time
                  class=""
                  datetime="2019-01-03"
                  title="Jan 3, 2019"
                >
                  in 5 months
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colEnd-id"
              >
                -
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colValue-id"
              >
                _
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id SaleList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
              >
                Happy year day!
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colStart-id"
              >
                <time
                  class=""
                  datetime="2019-01-03"
                  title="Jan 3, 2019"
                >
                  in 5 months
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colEnd-id"
              >
                -
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colValue-id"
              >
                _
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Discounts / Sale list no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Sales
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-sale"
            href="/discounts/sales/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Sale
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Sales
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Sale"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colStart-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Starts
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colEnd-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Ends
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colValue-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Value
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
                colspan="4"
              >
                No sales found
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Discounts / Voucher create default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Create Voucher
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="generate-code"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate Code
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Discount Code
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="code"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Discount Code
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Discount Type
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
                >
                  <div
                    aria-label="discountType"
                    class="MuiFormGroup-root-id"
                    role="radiogroup"
                  >
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            checked=""
                            class="PrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="VALUE_FIXED"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <circle
                              cx="12"
                              cy="12"
                              fill="currentColor"
                              r="12"
                            />
                            <circle
                              cx="12"
                              cy="12"
                              fill="var(--background-paper)"
                              r="5"
                            />
                          </svg>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                      >
                        Fixed Amount
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="VALUE_PERCENTAGE"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <circle
                              cx="12"
                              cy="12"
                              fill="var(--background-paper)"
                              r="11"
                              stroke="currentColor"
                              stroke-width="2"
                            />
                          </svg>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                      >
                        Percentage
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="SHIPPING"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <circle
                              cx="12"
                              cy="12"
                              fill="var(--background-paper)"
                              r="11"
                              stroke="currentColor"
                              stroke-width="2"
                            />
                          </svg>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                      >
                        Free Shipping
                      </span>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Value
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
              </div>
              <div
                class="VoucherValue-tableContainer-id"
              >
                <div
                  class="ResponsiveTable-root-id"
                >
                  <table
                    class="MuiTable-root-id VoucherValue-table-id"
                  >
                    <thead
                      class="MuiTableHead-root-id"
                    >
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                      >
                        <th
                          class="MuiTableCell-root-id MuiTableCell-head-id VoucherValue-colName-id"
                          scope="col"
                        >
                          <span>
                            Channel name
                          </span>
                        </th>
                        <th
                          class="MuiTableCell-root-id MuiTableCell-head-id VoucherValue-colType-id"
                          scope="col"
                        >
                          <span>
                            Price
                          </span>
                        </th>
                      </tr>
                    </thead>
                    <tbody
                      class="MuiTableBody-root-id"
                    >
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Test
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel test
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel USD
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel test
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel USD
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="applyOncePerOrder"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Apply only to a single cheapest eligible product
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If this option is disabled, discount will be counted for every eligible product
                  </div>
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Minimum Requirements
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="requirementsPicker"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="NONE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      None
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="ORDER"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Minimal order value
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="ITEM"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Minimum quantity of items
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Usage Limit
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id VoucherLimits-cardContent-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  data-test-id="has-usage-limit"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="hasUsageLimit"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Limit number of times this discount can be used in total
                </span>
              </label>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  data-test-id="apply-once-per-customer"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="applyOncePerCustomer"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Limit to one use per customer
                </span>
              </label>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  data-test-id="only-for-staff"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="onlyForStaff"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Limit to staff only
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Active Dates
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                    data-shrink="true"
                  >
                    Start Date
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startDate"
                      type="date"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Start Date
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                    data-shrink="true"
                  >
                    Start Hour
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startTime"
                      type="time"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Start Hour
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="hasEndDate"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Set end date
                </span>
              </label>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 7 out of 7 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel USD
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel USD
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="false"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="true"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Private Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Discounts / Voucher create form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Create Voucher
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="generate-code"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate Code
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                  data-shrink="false"
                >
                  Discount Code
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="code"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Discount Code
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Invalid value
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Discount Type
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
                >
                  <div
                    aria-label="discountType"
                    class="MuiFormGroup-root-id"
                    role="radiogroup"
                  >
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            checked=""
                            class="PrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="VALUE_FIXED"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <circle
                              cx="12"
                              cy="12"
                              fill="currentColor"
                              r="12"
                            />
                            <circle
                              cx="12"
                              cy="12"
                              fill="var(--background-paper)"
                              r="5"
                            />
                          </svg>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                      >
                        Fixed Amount
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="VALUE_PERCENTAGE"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <circle
                              cx="12"
                              cy="12"
                              fill="var(--background-paper)"
                              r="11"
                              stroke="currentColor"
                              stroke-width="2"
                            />
                          </svg>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                      >
                        Percentage
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="SHIPPING"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <circle
                              cx="12"
                              cy="12"
                              fill="var(--background-paper)"
                              r="11"
                              stroke="currentColor"
                              stroke-width="2"
                            />
                          </svg>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                      >
                        Free Shipping
                      </span>
                    </label>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Invalid value
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Value
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
              </div>
              <div
                class="VoucherValue-tableContainer-id"
              >
                <div
                  class="ResponsiveTable-root-id"
                >
                  <table
                    class="MuiTable-root-id VoucherValue-table-id"
                  >
                    <thead
                      class="MuiTableHead-root-id"
                    >
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                      >
                        <th
                          class="MuiTableCell-root-id MuiTableCell-head-id VoucherValue-colName-id"
                          scope="col"
                        >
                          <span>
                            Channel name
                          </span>
                        </th>
                        <th
                          class="MuiTableCell-root-id MuiTableCell-head-id VoucherValue-colType-id"
                          scope="col"
                        >
                          <span>
                            Price
                          </span>
                        </th>
                      </tr>
                    </thead>
                    <tbody
                      class="MuiTableBody-root-id"
                    >
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Test
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel test
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel USD
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel test
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel USD
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="applyOncePerOrder"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Apply only to a single cheapest eligible product
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If this option is disabled, discount will be counted for every eligible product
                  </div>
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Minimum Requirements
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="requirementsPicker"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="NONE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      None
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="ORDER"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Minimal order value
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="ITEM"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Minimum quantity of items
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Usage Limit
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id VoucherLimits-cardContent-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  data-test-id="has-usage-limit"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="hasUsageLimit"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Limit number of times this discount can be used in total
                </span>
              </label>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  data-test-id="apply-once-per-customer"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="applyOncePerCustomer"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Limit to one use per customer
                </span>
              </label>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  data-test-id="only-for-staff"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="onlyForStaff"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Limit to staff only
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Active Dates
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                    data-shrink="true"
                  >
                    Start Date
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startDate"
                      type="date"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Start Date
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Invalid value
                  </p>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                    data-shrink="true"
                  >
                    Start Hour
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startTime"
                      type="time"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Start Hour
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Invalid value
                  </p>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="hasEndDate"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Set end date
                </span>
              </label>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 7 out of 7 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel USD
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel USD
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="false"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="true"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Private Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            DISCOUNT
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Discount Code
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="code"
                    type="text"
                    value="DISCOUNT"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Discount Code
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Discount Type
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
                >
                  <div
                    aria-label="discountType"
                    class="MuiFormGroup-root-id"
                    role="radiogroup"
                  >
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            checked=""
                            class="PrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="VALUE_FIXED"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <circle
                              cx="12"
                              cy="12"
                              fill="currentColor"
                              r="12"
                            />
                            <circle
                              cx="12"
                              cy="12"
                              fill="var(--background-paper)"
                              r="5"
                            />
                          </svg>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                      >
                        Fixed Amount
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="VALUE_PERCENTAGE"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <circle
                              cx="12"
                              cy="12"
                              fill="var(--background-paper)"
                              r="11"
                              stroke="currentColor"
                              stroke-width="2"
                            />
                          </svg>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                      >
                        Percentage
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="SHIPPING"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <circle
                              cx="12"
                              cy="12"
                              fill="var(--background-paper)"
                              r="11"
                              stroke="currentColor"
                              stroke-width="2"
                            />
                          </svg>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                      >
                        Free Shipping
                      </span>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Value
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
              </div>
              <div
                class="VoucherValue-tableContainer-id"
              >
                <div
                  class="ResponsiveTable-root-id"
                >
                  <table
                    class="MuiTable-root-id VoucherValue-table-id"
                  >
                    <thead
                      class="MuiTableHead-root-id"
                    >
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                      >
                        <th
                          class="MuiTableCell-root-id MuiTableCell-head-id VoucherValue-colName-id"
                          scope="col"
                        >
                          <span>
                            Channel name
                          </span>
                        </th>
                        <th
                          class="MuiTableCell-root-id MuiTableCell-head-id VoucherValue-colType-id"
                          scope="col"
                        >
                          <span>
                            Price
                          </span>
                        </th>
                      </tr>
                    </thead>
                    <tbody
                      class="MuiTableBody-root-id"
                    >
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel1
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                              data-shrink="true"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="value"
                                type="number"
                                value="1"
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  USD
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Test
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel test
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel USD
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel test
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel USD
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id VoucherValue-hr-id"
              />
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id"
              >
                <label
                  class="RadioGroupField-formLabel-id"
                >
                  Voucher Specific Information
                </label>
                <div
                  aria-label="type"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="ENTIRE_ORDER"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Entire order
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="SPECIFIC_PRODUCT"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Specific products
                    </span>
                  </label>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="applyOncePerOrder"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Apply only to a single cheapest eligible product
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If this option is disabled, discount will be counted for every eligible product
                  </div>
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Minimum Requirements
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="requirementsPicker"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="NONE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      None
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="ORDER"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Minimal order value
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="ITEM"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Minimum quantity of items
                    </span>
                  </label>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
              </div>
              <div
                class="VoucherRequirements-tableContainer-id"
              >
                <div
                  class="ResponsiveTable-root-id"
                >
                  <table
                    class="MuiTable-root-id VoucherRequirements-table-id"
                  >
                    <thead
                      class="MuiTableHead-root-id"
                    >
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                      >
                        <th
                          class="MuiTableCell-root-id MuiTableCell-head-id VoucherRequirements-colName-id"
                          scope="col"
                        >
                          <span>
                            Channel name
                          </span>
                        </th>
                        <th
                          class="MuiTableCell-root-id MuiTableCell-head-id VoucherRequirements-colType-id"
                          scope="col"
                        >
                          <span>
                            Value
                          </span>
                        </th>
                      </tr>
                    </thead>
                    <tbody
                      class="MuiTableBody-root-id"
                    >
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel1
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherRequirements-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                              data-shrink="true"
                            >
                              Minimal order value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="minSpent"
                                step="0.01"
                                type="number"
                                value="1"
                              />
                              <span />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                >
                                  <span>
                                    Minimal order value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Test
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherRequirements-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Minimal order value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="minSpent"
                                step="0.01"
                                type="number"
                                value=""
                              />
                              <span />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Minimal order value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherRequirements-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Minimal order value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="minSpent"
                                step="0.01"
                                type="number"
                                value=""
                              />
                              <span />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Minimal order value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel test
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherRequirements-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Minimal order value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="minSpent"
                                step="0.01"
                                type="number"
                                value=""
                              />
                              <span />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Minimal order value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel USD
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherRequirements-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Minimal order value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="minSpent"
                                step="0.01"
                                type="number"
                                value=""
                              />
                              <span />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Minimal order value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherRequirements-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Minimal order value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="minSpent"
                                step="0.01"
                                type="number"
                                value=""
                              />
                              <span />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Minimal order value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel test
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherRequirements-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Minimal order value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="minSpent"
                                step="0.01"
                                type="number"
                                value=""
                              />
                              <span />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Minimal order value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel USD
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherRequirements-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Minimal order value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="minSpent"
                                step="0.01"
                                type="number"
                                value=""
                              />
                              <span />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Minimal order value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Usage Limit
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id VoucherLimits-cardContent-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  data-test-id="has-usage-limit"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="hasUsageLimit"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Limit number of times this discount can be used in total
                </span>
              </label>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  data-test-id="apply-once-per-customer"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="applyOncePerCustomer"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Limit to one use per customer
                </span>
              </label>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  data-test-id="only-for-staff"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="onlyForStaff"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Limit to staff only
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Active Dates
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Start Date
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startDate"
                      type="date"
                      value="2018-11-27"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Start Date
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Start Hour
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startTime"
                      type="time"
                      value="00:00"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Start Hour
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="hasEndDate"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Set end date
                </span>
              </label>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Summary
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Code
              </div>
              <div
                class="MuiTypography-root-id VoucherSummary-ellipsis-id MuiTypography-body1-id"
              >
                DISCOUNT
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Applies to
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Entire order
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Value
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                1.00
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Start Date
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Nov 27, 2018
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                End Date
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                -
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Min. Order Value
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                1.00
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Usage Limit
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                -
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 8 out of 8 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel1
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel USD
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel USD
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="false"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="true"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Private Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            DISCOUNT
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Discount Code
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="code"
                    type="text"
                    value="DISCOUNT"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Discount Code
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Invalid value
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Discount Type
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
                >
                  <div
                    aria-label="discountType"
                    class="MuiFormGroup-root-id"
                    role="radiogroup"
                  >
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            checked=""
                            class="PrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="VALUE_FIXED"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <circle
                              cx="12"
                              cy="12"
                              fill="currentColor"
                              r="12"
                            />
                            <circle
                              cx="12"
                              cy="12"
                              fill="var(--background-paper)"
                              r="5"
                            />
                          </svg>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                      >
                        Fixed Amount
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="VALUE_PERCENTAGE"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <circle
                              cx="12"
                              cy="12"
                              fill="var(--background-paper)"
                              r="11"
                              stroke="currentColor"
                              stroke-width="2"
                            />
                          </svg>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                      >
                        Percentage
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="SHIPPING"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <circle
                              cx="12"
                              cy="12"
                              fill="var(--background-paper)"
                              r="11"
                              stroke="currentColor"
                              stroke-width="2"
                            />
                          </svg>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                      >
                        Free Shipping
                      </span>
                    </label>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Invalid value
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Value
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
              </div>
              <div
                class="VoucherValue-tableContainer-id"
              >
                <div
                  class="ResponsiveTable-root-id"
                >
                  <table
                    class="MuiTable-root-id VoucherValue-table-id"
                  >
                    <thead
                      class="MuiTableHead-root-id"
                    >
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                      >
                        <th
                          class="MuiTableCell-root-id MuiTableCell-head-id VoucherValue-colName-id"
                          scope="col"
                        >
                          <span>
                            Channel name
                          </span>
                        </th>
                        <th
                          class="MuiTableCell-root-id MuiTableCell-head-id VoucherValue-colType-id"
                          scope="col"
                        >
                          <span>
                            Price
                          </span>
                        </th>
                      </tr>
                    </thead>
                    <tbody
                      class="MuiTableBody-root-id"
                    >
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel1
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                              data-shrink="true"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="value"
                                type="number"
                                value="1"
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  USD
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Test
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel test
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel USD
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel test
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel USD
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id VoucherValue-hr-id"
              />
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id"
              >
                <label
                  class="RadioGroupField-formLabel-id"
                >
                  Voucher Specific Information
                </label>
                <div
                  aria-label="type"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="ENTIRE_ORDER"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Entire order
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="SPECIFIC_PRODUCT"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Specific products
                    </span>
                  </label>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Invalid value
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="applyOncePerOrder"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Apply only to a single cheapest eligible product
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If this option is disabled, discount will be counted for every eligible product
                  </div>
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Minimum Requirements
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="requirementsPicker"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="NONE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      None
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="ORDER"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Minimal order value
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="ITEM"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Minimum quantity of items
                    </span>
                  </label>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
              </div>
              <div
                class="VoucherRequirements-tableContainer-id"
              >
                <div
                  class="ResponsiveTable-root-id"
                >
                  <table
                    class="MuiTable-root-id VoucherRequirements-table-id"
                  >
                    <thead
                      class="MuiTableHead-root-id"
                    >
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                      >
                        <th
                          class="MuiTableCell-root-id MuiTableCell-head-id VoucherRequirements-colName-id"
                          scope="col"
                        >
                          <span>
                            Channel name
                          </span>
                        </th>
                        <th
                          class="MuiTableCell-root-id MuiTableCell-head-id VoucherRequirements-colType-id"
                          scope="col"
                        >
                          <span>
                            Value
                          </span>
                        </th>
                      </tr>
                    </thead>
                    <tbody
                      class="MuiTableBody-root-id"
                    >
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel1
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherRequirements-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                              data-shrink="true"
                            >
                              Minimal order value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="minSpent"
                                step="0.01"
                                type="number"
                                value="1"
                              />
                              <span />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                >
                                  <span>
                                    Minimal order value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Test
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherRequirements-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Minimal order value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="minSpent"
                                step="0.01"
                                type="number"
                                value=""
                              />
                              <span />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Minimal order value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherRequirements-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Minimal order value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="minSpent"
                                step="0.01"
                                type="number"
                                value=""
                              />
                              <span />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Minimal order value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel test
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherRequirements-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Minimal order value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="minSpent"
                                step="0.01"
                                type="number"
                                value=""
                              />
                              <span />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Minimal order value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel USD
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherRequirements-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Minimal order value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="minSpent"
                                step="0.01"
                                type="number"
                                value=""
                              />
                              <span />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Minimal order value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherRequirements-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Minimal order value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="minSpent"
                                step="0.01"
                                type="number"
                                value=""
                              />
                              <span />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Minimal order value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel test
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherRequirements-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Minimal order value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="minSpent"
                                step="0.01"
                                type="number"
                                value=""
                              />
                              <span />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Minimal order value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel USD
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherRequirements-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                              data-shrink="false"
                            >
                              Minimal order value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                min="0"
                                name="minSpent"
                                step="0.01"
                                type="number"
                                value=""
                              />
                              <span />
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Minimal order value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Usage Limit
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id VoucherLimits-cardContent-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  data-test-id="has-usage-limit"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="hasUsageLimit"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Limit number of times this discount can be used in total
                </span>
              </label>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  data-test-id="apply-once-per-customer"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="applyOncePerCustomer"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Limit to one use per customer
                </span>
              </label>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  data-test-id="only-for-staff"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="onlyForStaff"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Limit to staff only
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Active Dates
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Start Date
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startDate"
                      type="date"
                      value="2018-11-27"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Start Date
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                  >
                    Invalid value
                  </p>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Start Hour
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startTime"
                      type="time"
                      value="00:00"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Start Hour
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                  >
                    Invalid value
                  </p>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="hasEndDate"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Set end date
                </span>
              </label>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Summary
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Code
              </div>
              <div
                class="MuiTypography-root-id VoucherSummary-ellipsis-id MuiTypography-body1-id"
              >
                DISCOUNT
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Applies to
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Entire order
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Value
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                1.00
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Start Date
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Nov 27, 2018
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                End Date
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                -
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Min. Order Value
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                1.00
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Usage Limit
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                -
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 8 out of 8 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel1
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel USD
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel USD
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="false"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="true"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Private Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
              style="width:10em"
            >
              ‌
            </span>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Discount Code
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="code"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Discount Code
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Discount Type
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
                >
                  <div
                    aria-label="discountType"
                    class="MuiFormGroup-root-id"
                    role="radiogroup"
                  >
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                    >
                      <span
                        aria-disabled="true"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        tabindex="-1"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            checked=""
                            class="PrivateSwitchBase-input-id"
                            disabled=""
                            name="discountType"
                            type="radio"
                            value="VALUE_FIXED"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <circle
                              cx="12"
                              cy="12"
                              fill="currentColor"
                              r="12"
                            />
                            <circle
                              cx="12"
                              cy="12"
                              fill="var(--background-paper)"
                              r="5"
                            />
                          </svg>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                      >
                        Fixed Amount
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                    >
                      <span
                        aria-disabled="true"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        tabindex="-1"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            disabled=""
                            name="discountType"
                            type="radio"
                            value="VALUE_PERCENTAGE"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <circle
                              cx="12"
                              cy="12"
                              fill="var(--background-paper)"
                              r="11"
                              stroke="currentColor"
                              stroke-width="2"
                            />
                          </svg>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                      >
                        Percentage
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                    >
                      <span
                        aria-disabled="true"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        tabindex="-1"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            disabled=""
                            name="discountType"
                            type="radio"
                            value="SHIPPING"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <circle
                              cx="12"
                              cy="12"
                              fill="var(--background-paper)"
                              r="11"
                              stroke="currentColor"
                              stroke-width="2"
                            />
                          </svg>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                      >
                        Free Shipping
                      </span>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Value
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
              </div>
              <div
                class="VoucherValue-tableContainer-id"
              >
                <div
                  class="ResponsiveTable-root-id"
                >
                  <table
                    class="MuiTable-root-id VoucherValue-table-id"
                  >
                    <thead
                      class="MuiTableHead-root-id"
                    >
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                      >
                        <th
                          class="MuiTableCell-root-id MuiTableCell-head-id VoucherValue-colName-id"
                          scope="col"
                        >
                          <span>
                            Channel name
                          </span>
                        </th>
                        <th
                          class="MuiTableCell-root-id MuiTableCell-head-id VoucherValue-colType-id"
                          scope="col"
                        >
                          <span>
                            Price
                          </span>
                        </th>
                      </tr>
                    </thead>
                    <tbody
                      class="MuiTableBody-root-id"
                    >
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel1
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                              data-shrink="true"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                disabled=""
                                min="0"
                                name="value"
                                type="number"
                                value="1"
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  USD
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Test
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                disabled=""
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                disabled=""
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel test
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                disabled=""
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel USD
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                disabled=""
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                disabled=""
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel test
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                disabled=""
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-hover-id"
                      >
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Channel USD
                          </div>
                        </td>
                        <td
                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
                        >
                          <div
                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                          >
                            <label
                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                              data-shrink="false"
                            >
                              Discount Value
                            </label>
                            <div
                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                            >
                              <input
                                aria-invalid="false"
                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                                disabled=""
                                min="0"
                                name="value"
                                type="number"
                                value=""
                              />
                              <div
                                class="TextFieldWithChoice-adornment-id"
                              >
                                <span
                                  class="MuiTypography-root-id MuiTypography-caption-id"
                                >
                                  euro
                                </span>
                              </div>
                              <fieldset
                                aria-hidden="true"
                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                              >
                                <legend
                                  class="PrivateNotchedOutline-legendLabelled-id"
                                >
                                  <span>
                                    Discount Value
                                  </span>
                                </legend>
                              </fieldset>
                            </div>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id VoucherValue-hr-id"
              />
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id"
              >
                <label
                  class="RadioGroupField-formLabel-id"
                >
                  Voucher Specific Information
                </label>
                <div
                  aria-label="type"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="type"
                          type="radio"
                          value="ENTIRE_ORDER"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      Entire order
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="type"
                          type="radio"
                          value="SPECIFIC_PRODUCT"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      Specific products
                    </span>
                  </label>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      name="applyOncePerOrder"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Apply only to a single cheapest eligible product
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If this option is disabled, discount will be counted for every eligible product
                  </div>
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Minimum Requirements
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="requirementsPicker"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="requirementsPicker"
                          type="radio"
                          value="NONE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      None
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="requirementsPicker"
                          type="radio"
                          value="ORDER"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      Minimal order value
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="requirementsPicker"
                          type="radio"
                          value="ITEM"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      Minimum quantity of items
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Usage Limit
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id VoucherLimits-cardContent-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  data-test-id="has-usage-limit"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="hasUsageLimit"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Limit number of times this discount can be used in total
                </span>
              </label>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  data-test-id="apply-once-per-customer"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="applyOncePerCustomer"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Limit to one use per customer
                </span>
              </label>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  data-test-id="only-for-staff"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="onlyForStaff"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Limit to staff only
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Active Dates
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="true"
                  >
                    Start Date
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="startDate"
                      type="date"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Start Date
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="true"
                  >
                    Start Hour
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="startTime"
                      type="time"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Start Hour
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="hasEndDate"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Set end date
                </span>
              </label>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Summary
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Code
              </div>
              <div
                class="MuiTypography-root-id VoucherSummary-ellipsis-id MuiTypography-body1-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Applies to
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Value
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Start Date
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                End Date
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Min. Order Value
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Usage Limit
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 8 out of 8 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel1
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel USD
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Channel USD
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="false"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
            >
              ‌
            </span>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="true"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Private Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
            >
              ‌
            </span>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Vouchers
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-voucher"
            href="/discounts/vouchers/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create voucher
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Vouchers
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Voucher"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <a
          class="TableRowLink-link-id"
          href="/discounts/vouchers/Vm91Y2hlcjox"
        />
        <a
          class="TableRowLink-link-id"
          href="/discounts/vouchers/Vm91Y2hlcjoy"
        />
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Code
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colMinSpent-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Min. Spent
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colStart-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Starts
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colEnd-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Ends
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colValue-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Value
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colUses-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Uses
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="7"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id VoucherList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colName-id VoucherList-textOverflow-id"
              >
                FREE2019
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colMinSpent-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                1.00
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colStart-id"
              >
                <time
                  class=""
                  datetime="2019-01-03"
                  title="Jan 3, 2019"
                >
                  in 5 months
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colEnd-id"
              >
                -
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colValue-id"
              >
                1%
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colUses-id"
              >
                -
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id VoucherList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colName-id VoucherList-textOverflow-id"
              >
                FREE2020
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colMinSpent-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                1.00
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colStart-id"
              >
                <time
                  class=""
                  datetime="2019-01-03"
                  title="Jan 3, 2019"
                >
                  in 5 months
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colEnd-id"
              >
                -
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colValue-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                1.00
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colUses-id"
              >
                150
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Discounts / Voucher list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Vouchers
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-voucher"
            href="/discounts/vouchers/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create voucher
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Vouchers
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Voucher"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Code
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colMinSpent-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Min. Spent
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colStart-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Starts
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colEnd-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Ends
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colValue-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Value
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colUses-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Uses
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="7"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colName-id VoucherList-textOverflow-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colMinSpent-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colStart-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colEnd-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colValue-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colUses-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Discounts / Voucher list no channels 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Vouchers
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-voucher"
            href="/discounts/vouchers/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create voucher
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Vouchers
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Voucher"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <a
          class="TableRowLink-link-id"
          href="/discounts/vouchers/Vm91Y2hlcjox"
        />
        <a
          class="TableRowLink-link-id"
          href="/discounts/vouchers/Vm91Y2hlcjoy"
        />
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Code
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colMinSpent-id TableCellHeader-disabled-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Min. Spent
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colStart-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Starts
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colEnd-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Ends
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colValue-id TableCellHeader-disabled-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Value
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colUses-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Uses
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="7"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id VoucherList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colName-id VoucherList-textOverflow-id"
              >
                FREE2019
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colMinSpent-id"
              >
                -
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colStart-id"
              >
                <time
                  class=""
                  datetime="2019-01-03"
                  title="Jan 3, 2019"
                >
                  in 5 months
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colEnd-id"
              >
                -
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colValue-id"
              >
                -
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colUses-id"
              >
                -
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id VoucherList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colName-id VoucherList-textOverflow-id"
              >
                FREE2020
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colMinSpent-id"
              >
                -
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colStart-id"
              >
                <time
                  class=""
                  datetime="2019-01-03"
                  title="Jan 3, 2019"
                >
                  in 5 months
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colEnd-id"
              >
                -
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colValue-id"
              >
                -
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colUses-id"
              >
                150
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Discounts / Voucher list no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Vouchers
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-voucher"
            href="/discounts/vouchers/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create voucher
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Vouchers
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Voucher"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Code
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colMinSpent-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Min. Spent
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colStart-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Starts
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colEnd-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Ends
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colValue-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Value
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colUses-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Uses
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="7"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
                colspan="7"
              >
                No vouchers found
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Error page default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="ErrorPage-root-id"
  >
    <div
      class="ErrorPage-container-id"
    >
      <div
        class="ErrorPage-innerContainer-id"
      >
        <div>
          <div
            class="MuiTypography-root-id ErrorPage-header-id MuiTypography-h1-id"
          >
            We’ve encountered an unexpected error
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Don’t worry we will fix it soon. Try to refresh the page or go back to dashboard.
          </div>
        </div>
        <div
          class="ErrorPage-buttonContainer-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Dashboard
            </span>
          </button>
          <div
            class="ErrorPage-conjunction-id"
          >
            or
          </div>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Refresh page
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Error page with error id 1`] = `
<div
  style="padding:24px"
>
  <div
    class="ErrorPage-root-id"
  >
    <div
      class="ErrorPage-container-id"
    >
      <div
        class="ErrorPage-innerContainer-id"
      >
        <div>
          <div
            class="MuiTypography-root-id ErrorPage-header-id MuiTypography-h1-id"
          >
            We’ve encountered an unexpected error
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Don’t worry we will fix it soon. Try to refresh the page or go back to dashboard.
          </div>
          <div>
            <div
              class="MuiTypography-root-id ErrorPage-errorId-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
            >
              Error ID
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              LS5E4RahA4Dc+mNICEUKXPaVkOR1ChT=
            </div>
          </div>
        </div>
        <div
          class="ErrorPage-buttonContainer-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Dashboard
            </span>
          </button>
          <div
            class="ErrorPage-conjunction-id"
          >
            or
          </div>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Refresh page
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / HomePage default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="HomeHeader-headerContainer-id"
      data-test-id="home-header"
    >
      <div>
        <div
          class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
          data-test-id="welcome-header"
        >
          Hello there, admin@example.com
        </div>
        <div
          class="MuiTypography-root-id HomeHeader-subtitle-id MuiTypography-body1-id"
        >
          Here is some information we gathered about your store
        </div>
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="HomePage-cardContainer-id"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
              data-test-id="sales-analytics"
            >
              <div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-cardTitle-id MuiTypography-subtitle1-id"
                >
                  Sales
                </div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                >
                  Today
                </div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
                >
                  <span
                    class="Money-currency-id"
                  >
                    USD
                  </span>
                  57.15
                </div>
              </div>
              <div
                class="HomeAnalyticsCard-iconBackground-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id HomePage-icon-id MuiSvgIcon-fontSizeInherit-id"
                  focusable="false"
                  viewBox="0 0 64 64"
                >
                  <path
                    clip-rule="evenodd"
                    d="M40.1974 14H49.7682V22.7732L45.9287 19.2537L35.0969 30.0855L25.1555 28.0973L15.5364 39.6402L14 38.3598L24.3809 25.9027L34.4395 27.9145L44.453 17.901L40.1974 14ZM21.2682 44H17.2682V49H21.2682V44ZM15.2682 42V51H23.2682V42H15.2682ZM26.2682 34H30.2682V49H26.2682V34ZM24.2682 51V32H32.2682V51H24.2682ZM39.2682 37H35.2682V49H39.2682V37ZM33.2682 35V51H41.2682V35H33.2682ZM44.2682 28H48.2682V49H44.2682V28ZM42.2682 51V26H50.2682V51H42.2682Z"
                    fill="#06847B"
                    fill-rule="evenodd"
                  />
                </svg>
              </div>
            </div>
          </div>
          <div
            class="MuiPaper-root-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
              data-test-id="orders-analytics"
            >
              <div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-cardTitle-id MuiTypography-subtitle1-id"
                >
                  Orders
                </div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                >
                  Today
                </div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
                >
                  1
                </div>
              </div>
              <div
                class="HomeAnalyticsCard-iconBackground-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id HomePage-icon-id MuiSvgIcon-fontSizeInherit-id"
                  focusable="false"
                  viewBox="0 0 64 64"
                >
                  <path
                    clip-rule="evenodd"
                    d="M43 13H16V51H43V45.5H41V49H18V15H41V33.5H43V13ZM40 43.9142L48.2071 35.7071L46.7928 34.2929L40 41.0858L36.7071 37.7929L35.2928 39.2071L40 43.9142ZM22 19H25V22H22V19ZM36 19H27V22H36V19ZM22 25H25V28H22V25ZM36 25H27V28H36V25ZM22 31H25V34H22V31ZM36 31H27V34H36V31Z"
                    fill="#06847B"
                    fill-rule="evenodd"
                  />
                </svg>
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id HomeNotificationTable-tableCard-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <tbody
                class="MuiTableBody-root-id HomeNotificationTable-tableRow-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                    data-test-id="orders-to-fulfill"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <strong>
                        1
                      </strong>
                       orders are ready to fulfill
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
                      />
                    </svg>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                    data-test-id="orders-to-capture"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      No payments waiting for capture
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
                      />
                    </svg>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                    data-test-id="products-out-of-stock"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      No products are out of stock
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
                      />
                    </svg>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-id="top-products"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Top Products
              </span>
            </div>
          </div>
          <div
            class="ResponsiveTable-root-id"
          >
            <a
              class="TableRowLink-link-id"
              href="/products/UHJvZHVjdDo4/variant/UHJvZHVjdFZhcmlhbnQ6NDM%3D"
            />
            <table
              class="MuiTable-root-id"
            >
              <colgroup>
                <col
                  class="HomeProductListCard-colAvatar-id"
                />
                <col
                  class="HomeProductListCard-colName-id"
                />
                <col />
              </colgroup>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id HomeProductListCard-tableRow-id MuiTableRow-hover-id"
                >
                  <td
                    avatarprops="HomeProductListCard-avatarProps-id"
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id HomeProductListCard-colAvatar-id"
                    data-test-id="table-cell-avatar"
                    thumbnail="placeholder60x60.png"
                  >
                    <div
                      class="Avatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id HomeProductListCard-avatarProps-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder60x60.png"
                        />
                      </div>
                      <div
                        class="Avatar-children-id"
                      />
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id HomeProductListCard-label-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
                    >
                      Gardner-Martin
                    </div>
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      XS
                    </div>
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      One ordered
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      37.65
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-id="activity-card"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Activity
              </span>
            </div>
          </div>
          <ul
            class="MuiList-root-id MuiList-dense-id"
          >
            <li
              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Order #15 was placed from draft by admin@example.com
                </div>
                <div
                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
                >
                  <time
                    class=""
                    datetime="1536941427137"
                    title="Sep 14, 2018 12:10 PM"
                  >
                    in a month
                  </time>
                </div>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Order #15 was placed
                </div>
                <div
                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
                >
                  <time
                    class=""
                    datetime="1538573326325"
                    title="Oct 3, 2018 9:28 AM"
                  >
                    in 2 months
                  </time>
                </div>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Order #15 was fully paid
                </div>
                <div
                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
                >
                  <time
                    class=""
                    datetime="1538573341837"
                    title="Oct 3, 2018 9:29 AM"
                  >
                    in 2 months
                  </time>
                </div>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Order #15 was placed from draft by admin@example.com
                </div>
                <div
                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
                >
                  <time
                    class=""
                    datetime="1538614911243"
                    title="Oct 3, 2018 9:01 PM"
                  >
                    in 2 months
                  </time>
                </div>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Order #15 was placed from draft by admin@example.com
                </div>
                <div
                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
                >
                  <time
                    class=""
                    datetime="1538681778831"
                    title="Oct 4, 2018 3:36 PM"
                  >
                    in 2 months
                  </time>
                </div>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Order #15 was placed from draft by admin@example.com
                </div>
                <div
                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
                >
                  <time
                    class=""
                    datetime="1538681881420"
                    title="Oct 4, 2018 3:38 PM"
                  >
                    in 2 months
                  </time>
                </div>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Order #15 was placed from draft by admin@example.com
                </div>
                <div
                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
                >
                  <time
                    class=""
                    datetime="1538742657268"
                    title="Oct 5, 2018 8:30 AM"
                  >
                    in 2 months
                  </time>
                </div>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Order #15 was placed
                </div>
                <div
                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
                >
                  <time
                    class=""
                    datetime="1538992242622"
                    title="Oct 8, 2018 5:50 AM"
                  >
                    in 2 months
                  </time>
                </div>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Order #15 was placed from draft by admin@example.com
                </div>
                <div
                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
                >
                  <time
                    class=""
                    datetime="1539359471665"
                    title="Oct 12, 2018 11:51 AM"
                  >
                    in 2 months
                  </time>
                </div>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Order #15 was placed from draft
                </div>
                <div
                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
                >
                  <time
                    class=""
                    datetime="1539359471665"
                    title="Oct 12, 2018 11:51 AM"
                  >
                    in 2 months
                  </time>
                </div>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Order #15 was placed
                </div>
                <div
                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
                >
                  <time
                    class=""
                    datetime="1540466758843"
                    title="Oct 25, 2018 7:25 AM"
                  >
                    in 3 months
                  </time>
                </div>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Order #15 was placed
                </div>
                <div
                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
                >
                  <time
                    class=""
                    datetime="1540546497580"
                    title="Oct 26, 2018 5:34 AM"
                  >
                    in 3 months
                  </time>
                </div>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Order #15 was fully paid
                </div>
                <div
                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
                >
                  <time
                    class=""
                    datetime="1540546682440"
                    title="Oct 26, 2018 5:38 AM"
                  >
                    in 3 months
                  </time>
                </div>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Order #15 was fully paid
                </div>
                <div
                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
                >
                  <time
                    class=""
                    datetime="1540546682467"
                    title="Oct 26, 2018 5:38 AM"
                  >
                    in 3 months
                  </time>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / HomePage loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="HomeHeader-headerContainer-id"
      data-test-id="home-header"
    >
      <div>
        <div
          class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
          data-test-id="welcome-header"
        >
          <span
            class="Skeleton-skeleton-id"
            data-test-id="skeleton"
            style="width:10em"
          >
            ‌
          </span>
        </div>
        <div
          class="MuiTypography-root-id HomeHeader-subtitle-id MuiTypography-body1-id"
        >
          <span
            class="Skeleton-skeleton-id"
            data-test-id="skeleton"
            style="width:10em"
          >
            ‌
          </span>
        </div>
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="HomePage-cardContainer-id"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
              data-test-id="sales-analytics"
            >
              <div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-cardTitle-id MuiTypography-subtitle1-id"
                >
                  Sales
                </div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                >
                  Today
                </div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                    data-test-id="skeleton"
                    style="width:5em"
                  >
                    ‌
                  </span>
                </div>
              </div>
              <div
                class="HomeAnalyticsCard-iconBackground-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id HomePage-icon-id MuiSvgIcon-fontSizeInherit-id"
                  focusable="false"
                  viewBox="0 0 64 64"
                >
                  <path
                    clip-rule="evenodd"
                    d="M40.1974 14H49.7682V22.7732L45.9287 19.2537L35.0969 30.0855L25.1555 28.0973L15.5364 39.6402L14 38.3598L24.3809 25.9027L34.4395 27.9145L44.453 17.901L40.1974 14ZM21.2682 44H17.2682V49H21.2682V44ZM15.2682 42V51H23.2682V42H15.2682ZM26.2682 34H30.2682V49H26.2682V34ZM24.2682 51V32H32.2682V51H24.2682ZM39.2682 37H35.2682V49H39.2682V37ZM33.2682 35V51H41.2682V35H33.2682ZM44.2682 28H48.2682V49H44.2682V28ZM42.2682 51V26H50.2682V51H42.2682Z"
                    fill="#06847B"
                    fill-rule="evenodd"
                  />
                </svg>
              </div>
            </div>
          </div>
          <div
            class="MuiPaper-root-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
              data-test-id="orders-analytics"
            >
              <div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-cardTitle-id MuiTypography-subtitle1-id"
                >
                  Orders
                </div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                >
                  Today
                </div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                    data-test-id="skeleton"
                    style="width:5em"
                  >
                    ‌
                  </span>
                </div>
              </div>
              <div
                class="HomeAnalyticsCard-iconBackground-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id HomePage-icon-id MuiSvgIcon-fontSizeInherit-id"
                  focusable="false"
                  viewBox="0 0 64 64"
                >
                  <path
                    clip-rule="evenodd"
                    d="M43 13H16V51H43V45.5H41V49H18V15H41V33.5H43V13ZM40 43.9142L48.2071 35.7071L46.7928 34.2929L40 41.0858L36.7071 37.7929L35.2928 39.2071L40 43.9142ZM22 19H25V22H22V19ZM36 19H27V22H36V19ZM22 25H25V28H22V25ZM36 25H27V28H36V25ZM22 31H25V34H22V31ZM36 31H27V34H36V31Z"
                    fill="#06847B"
                    fill-rule="evenodd"
                  />
                </svg>
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id HomeNotificationTable-tableCard-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <tbody
                class="MuiTableBody-root-id HomeNotificationTable-tableRow-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                    data-test-id="orders-to-fulfill"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      No orders ready to fulfill
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
                      />
                    </svg>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                    data-test-id="orders-to-capture"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      No payments waiting for capture
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
                      />
                    </svg>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                    data-test-id="products-out-of-stock"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      No products are out of stock
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
                      />
                    </svg>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / HomePage no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="HomeHeader-headerContainer-id"
      data-test-id="home-header"
    >
      <div>
        <div
          class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
          data-test-id="welcome-header"
        >
          Hello there, admin@example.com
        </div>
        <div
          class="MuiTypography-root-id HomeHeader-subtitle-id MuiTypography-body1-id"
        >
          Here is some information we gathered about your store
        </div>
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="HomePage-cardContainer-id"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
              data-test-id="sales-analytics"
            >
              <div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-cardTitle-id MuiTypography-subtitle1-id"
                >
                  Sales
                </div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                >
                  Today
                </div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
                >
                  <span
                    class="Money-currency-id"
                  >
                    USD
                  </span>
                  57.15
                </div>
              </div>
              <div
                class="HomeAnalyticsCard-iconBackground-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id HomePage-icon-id MuiSvgIcon-fontSizeInherit-id"
                  focusable="false"
                  viewBox="0 0 64 64"
                >
                  <path
                    clip-rule="evenodd"
                    d="M40.1974 14H49.7682V22.7732L45.9287 19.2537L35.0969 30.0855L25.1555 28.0973L15.5364 39.6402L14 38.3598L24.3809 25.9027L34.4395 27.9145L44.453 17.901L40.1974 14ZM21.2682 44H17.2682V49H21.2682V44ZM15.2682 42V51H23.2682V42H15.2682ZM26.2682 34H30.2682V49H26.2682V34ZM24.2682 51V32H32.2682V51H24.2682ZM39.2682 37H35.2682V49H39.2682V37ZM33.2682 35V51H41.2682V35H33.2682ZM44.2682 28H48.2682V49H44.2682V28ZM42.2682 51V26H50.2682V51H42.2682Z"
                    fill="#06847B"
                    fill-rule="evenodd"
                  />
                </svg>
              </div>
            </div>
          </div>
          <div
            class="MuiPaper-root-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
              data-test-id="orders-analytics"
            >
              <div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-cardTitle-id MuiTypography-subtitle1-id"
                >
                  Orders
                </div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                >
                  Today
                </div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
                >
                  1
                </div>
              </div>
              <div
                class="HomeAnalyticsCard-iconBackground-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id HomePage-icon-id MuiSvgIcon-fontSizeInherit-id"
                  focusable="false"
                  viewBox="0 0 64 64"
                >
                  <path
                    clip-rule="evenodd"
                    d="M43 13H16V51H43V45.5H41V49H18V15H41V33.5H43V13ZM40 43.9142L48.2071 35.7071L46.7928 34.2929L40 41.0858L36.7071 37.7929L35.2928 39.2071L40 43.9142ZM22 19H25V22H22V19ZM36 19H27V22H36V19ZM22 25H25V28H22V25ZM36 25H27V28H36V25ZM22 31H25V34H22V31ZM36 31H27V34H36V31Z"
                    fill="#06847B"
                    fill-rule="evenodd"
                  />
                </svg>
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id HomeNotificationTable-tableCard-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <tbody
                class="MuiTableBody-root-id HomeNotificationTable-tableRow-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                    data-test-id="orders-to-fulfill"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <strong>
                        1
                      </strong>
                       orders are ready to fulfill
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
                      />
                    </svg>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                    data-test-id="orders-to-capture"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      No payments waiting for capture
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
                      />
                    </svg>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                    data-test-id="products-out-of-stock"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      No products are out of stock
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
                      />
                    </svg>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-id="top-products"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Top Products
              </span>
            </div>
          </div>
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <colgroup>
                <col
                  class="HomeProductListCard-colAvatar-id"
                />
                <col
                  class="HomeProductListCard-colName-id"
                />
                <col />
              </colgroup>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id HomeProductListCard-noProducts-id"
                    colspan="3"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      No products found
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-id="activity-card"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Activity
              </span>
            </div>
          </div>
          <ul
            class="MuiList-root-id MuiList-dense-id"
          >
            <li
              class="MuiListItem-root-id HomeActivityCard-noProducts-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  No activities found
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / HomePage no permissions 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="HomeHeader-headerContainer-id"
      data-test-id="home-header"
    >
      <div>
        <div
          class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
          data-test-id="welcome-header"
        >
          Hello there, admin@example.com
        </div>
        <div
          class="MuiTypography-root-id HomeHeader-subtitle-id MuiTypography-body1-id"
        >
          Here is some information we gathered about your store
        </div>
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id HomeNotificationTable-tableCard-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <tbody
                class="MuiTableBody-root-id HomeNotificationTable-tableRow-id"
              />
            </table>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
      </div>
      <div />
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / HomePage order permissions 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="HomeHeader-headerContainer-id"
      data-test-id="home-header"
    >
      <div>
        <div
          class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
          data-test-id="welcome-header"
        >
          Hello there, admin@example.com
        </div>
        <div
          class="MuiTypography-root-id HomeHeader-subtitle-id MuiTypography-body1-id"
        >
          Here is some information we gathered about your store
        </div>
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="HomePage-cardContainer-id"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
              data-test-id="sales-analytics"
            >
              <div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-cardTitle-id MuiTypography-subtitle1-id"
                >
                  Sales
                </div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                >
                  Today
                </div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
                >
                  <span
                    class="Money-currency-id"
                  >
                    USD
                  </span>
                  57.15
                </div>
              </div>
              <div
                class="HomeAnalyticsCard-iconBackground-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id HomePage-icon-id MuiSvgIcon-fontSizeInherit-id"
                  focusable="false"
                  viewBox="0 0 64 64"
                >
                  <path
                    clip-rule="evenodd"
                    d="M40.1974 14H49.7682V22.7732L45.9287 19.2537L35.0969 30.0855L25.1555 28.0973L15.5364 39.6402L14 38.3598L24.3809 25.9027L34.4395 27.9145L44.453 17.901L40.1974 14ZM21.2682 44H17.2682V49H21.2682V44ZM15.2682 42V51H23.2682V42H15.2682ZM26.2682 34H30.2682V49H26.2682V34ZM24.2682 51V32H32.2682V51H24.2682ZM39.2682 37H35.2682V49H39.2682V37ZM33.2682 35V51H41.2682V35H33.2682ZM44.2682 28H48.2682V49H44.2682V28ZM42.2682 51V26H50.2682V51H42.2682Z"
                    fill="#06847B"
                    fill-rule="evenodd"
                  />
                </svg>
              </div>
            </div>
          </div>
          <div
            class="MuiPaper-root-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
              data-test-id="orders-analytics"
            >
              <div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-cardTitle-id MuiTypography-subtitle1-id"
                >
                  Orders
                </div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                >
                  Today
                </div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
                >
                  1
                </div>
              </div>
              <div
                class="HomeAnalyticsCard-iconBackground-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id HomePage-icon-id MuiSvgIcon-fontSizeInherit-id"
                  focusable="false"
                  viewBox="0 0 64 64"
                >
                  <path
                    clip-rule="evenodd"
                    d="M43 13H16V51H43V45.5H41V49H18V15H41V33.5H43V13ZM40 43.9142L48.2071 35.7071L46.7928 34.2929L40 41.0858L36.7071 37.7929L35.2928 39.2071L40 43.9142ZM22 19H25V22H22V19ZM36 19H27V22H36V19ZM22 25H25V28H22V25ZM36 25H27V28H36V25ZM22 31H25V34H22V31ZM36 31H27V34H36V31Z"
                    fill="#06847B"
                    fill-rule="evenodd"
                  />
                </svg>
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id HomeNotificationTable-tableCard-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <tbody
                class="MuiTableBody-root-id HomeNotificationTable-tableRow-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                    data-test-id="orders-to-fulfill"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <strong>
                        1
                      </strong>
                       orders are ready to fulfill
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
                      />
                    </svg>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                    data-test-id="orders-to-capture"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      No payments waiting for capture
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
                      />
                    </svg>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-id="activity-card"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Activity
              </span>
            </div>
          </div>
          <ul
            class="MuiList-root-id MuiList-dense-id"
          >
            <li
              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Order #15 was placed from draft by admin@example.com
                </div>
                <div
                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
                >
                  <time
                    class=""
                    datetime="1536941427137"
                    title="Sep 14, 2018 12:10 PM"
                  >
                    in a month
                  </time>
                </div>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Order #15 was placed
                </div>
                <div
                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
                >
                  <time
                    class=""
                    datetime="1538573326325"
                    title="Oct 3, 2018 9:28 AM"
                  >
                    in 2 months
                  </time>
                </div>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Order #15 was fully paid
                </div>
                <div
                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
                >
                  <time
                    class=""
                    datetime="1538573341837"
                    title="Oct 3, 2018 9:29 AM"
                  >
                    in 2 months
                  </time>
                </div>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Order #15 was placed from draft by admin@example.com
                </div>
                <div
                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
                >
                  <time
                    class=""
                    datetime="1538614911243"
                    title="Oct 3, 2018 9:01 PM"
                  >
                    in 2 months
                  </time>
                </div>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Order #15 was placed from draft by admin@example.com
                </div>
                <div
                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
                >
                  <time
                    class=""
                    datetime="1538681778831"
                    title="Oct 4, 2018 3:36 PM"
                  >
                    in 2 months
                  </time>
                </div>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Order #15 was placed from draft by admin@example.com
                </div>
                <div
                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
                >
                  <time
                    class=""
                    datetime="1538681881420"
                    title="Oct 4, 2018 3:38 PM"
                  >
                    in 2 months
                  </time>
                </div>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Order #15 was placed from draft by admin@example.com
                </div>
                <div
                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
                >
                  <time
                    class=""
                    datetime="1538742657268"
                    title="Oct 5, 2018 8:30 AM"
                  >
                    in 2 months
                  </time>
                </div>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Order #15 was placed
                </div>
                <div
                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
                >
                  <time
                    class=""
                    datetime="1538992242622"
                    title="Oct 8, 2018 5:50 AM"
                  >
                    in 2 months
                  </time>
                </div>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Order #15 was placed from draft by admin@example.com
                </div>
                <div
                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
                >
                  <time
                    class=""
                    datetime="1539359471665"
                    title="Oct 12, 2018 11:51 AM"
                  >
                    in 2 months
                  </time>
                </div>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Order #15 was placed from draft
                </div>
                <div
                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
                >
                  <time
                    class=""
                    datetime="1539359471665"
                    title="Oct 12, 2018 11:51 AM"
                  >
                    in 2 months
                  </time>
                </div>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Order #15 was placed
                </div>
                <div
                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
                >
                  <time
                    class=""
                    datetime="1540466758843"
                    title="Oct 25, 2018 7:25 AM"
                  >
                    in 3 months
                  </time>
                </div>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Order #15 was placed
                </div>
                <div
                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
                >
                  <time
                    class=""
                    datetime="1540546497580"
                    title="Oct 26, 2018 5:34 AM"
                  >
                    in 3 months
                  </time>
                </div>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Order #15 was fully paid
                </div>
                <div
                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
                >
                  <time
                    class=""
                    datetime="1540546682440"
                    title="Oct 26, 2018 5:38 AM"
                  >
                    in 3 months
                  </time>
                </div>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Order #15 was fully paid
                </div>
                <div
                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
                >
                  <time
                    class=""
                    datetime="1540546682467"
                    title="Oct 26, 2018 5:38 AM"
                  >
                    in 3 months
                  </time>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / HomePage product permissions 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="HomeHeader-headerContainer-id"
      data-test-id="home-header"
    >
      <div>
        <div
          class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
          data-test-id="welcome-header"
        >
          Hello there, admin@example.com
        </div>
        <div
          class="MuiTypography-root-id HomeHeader-subtitle-id MuiTypography-body1-id"
        >
          Here is some information we gathered about your store
        </div>
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id HomeNotificationTable-tableCard-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <tbody
                class="MuiTableBody-root-id HomeNotificationTable-tableRow-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                    data-test-id="products-out-of-stock"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      No products are out of stock
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
                      />
                    </svg>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
      </div>
      <div />
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Navigation / Menu details default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-h5-id"
          >
            Navigation
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Creating the navigation structure is done by dragging and dropping. Simply create a new menu item and then drag it into its destined place. You can move items inside one another to create a tree structure and drag items up and down to create a hierarchy
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Menu Title
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="navbar"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Menu Title
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Menu Items
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Undo
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MenuItems-container-id"
              style="min-height:224px;padding:;padding-top:"
            >
              <div
                class="rst__tree MenuItems-root-id"
              >
                <div
                  class="rst__node"
                  style="height:56px"
                >
                  <div
                    class="rst__lineBlock rst__lineHalfHorizontalRight rst__lineHalfVerticalBottom"
                    style="width:44px"
                  />
                  <div
                    class="rst__nodeContent"
                    style="left:44px"
                  >
                    <div
                      class="MenuItems-rowContainer-id"
                      style="margin-left:0"
                    >
                      <div
                        class="MuiPaper-root-id MenuItems-row-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                      >
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MenuItems-dragIcon-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              clip-rule="evenodd"
                              d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
                              fill="url(#paint0_linear)"
                              fill-rule="evenodd"
                              style="transform:translate(7px, 4px)"
                            />
                            <defs>
                              <linearGradient
                                gradientUnits="userSpaceOnUse"
                                id="paint0_linear"
                                x1="0"
                                x2="16.0896"
                                y1="0"
                                y2="10.4478"
                              >
                                <stop
                                  stop-color="#06847B"
                                />
                                <stop
                                  offset="1"
                                  stop-color="#3EE7CD"
                                />
                              </linearGradient>
                            </defs>
                          </svg>
                        </div>
                        <div
                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
                        >
                          Accessories
                        </div>
                        <div
                          class="MenuItems-spacer-id"
                        />
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Show
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                            />
                          </svg>
                        </button>
                        <button
                          class="MuiButtonBase-root-id IconButton-secondary-id MenuItems-deleteButton-id IconButton-hoverOutline-id"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="rst__node"
                  style="height:56px"
                >
                  <div
                    class="rst__lineBlock rst__lineFullVertical"
                    style="width:44px"
                  />
                  <div
                    class="rst__lineBlock rst__lineHalfHorizontalRight rst__lineFullVertical"
                    style="width:44px"
                  />
                  <div
                    class="rst__nodeContent"
                    style="left:88px"
                  >
                    <div
                      class="MenuItems-rowContainer-id"
                      style="margin-left:40px"
                    >
                      <div
                        class="MuiPaper-root-id MenuItems-row-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                      >
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MenuItems-dragIcon-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              clip-rule="evenodd"
                              d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
                              fill="url(#paint0_linear)"
                              fill-rule="evenodd"
                              style="transform:translate(7px, 4px)"
                            />
                            <defs>
                              <linearGradient
                                gradientUnits="userSpaceOnUse"
                                id="paint0_linear"
                                x1="0"
                                x2="16.0896"
                                y1="0"
                                y2="10.4478"
                              >
                                <stop
                                  stop-color="#06847B"
                                />
                                <stop
                                  offset="1"
                                  stop-color="#3EE7CD"
                                />
                              </linearGradient>
                            </defs>
                          </svg>
                        </div>
                        <div
                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
                        >
                          Jewelry
                        </div>
                        <div
                          class="MenuItems-spacer-id"
                        />
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Show
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                            />
                          </svg>
                        </button>
                        <button
                          class="MuiButtonBase-root-id IconButton-secondary-id MenuItems-deleteButton-id IconButton-hoverOutline-id"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="rst__node"
                  style="height:56px"
                >
                  <div
                    class="rst__lineBlock rst__lineFullVertical"
                    style="width:44px"
                  />
                  <div
                    class="rst__lineBlock rst__lineHalfVerticalTop rst__lineHalfHorizontalRight"
                    style="width:44px"
                  />
                  <div
                    class="rst__nodeContent"
                    style="left:88px"
                  >
                    <div
                      class="MenuItems-rowContainer-id"
                      style="margin-left:40px"
                    >
                      <div
                        class="MuiPaper-root-id MenuItems-row-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                      >
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MenuItems-dragIcon-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              clip-rule="evenodd"
                              d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
                              fill="url(#paint0_linear)"
                              fill-rule="evenodd"
                              style="transform:translate(7px, 4px)"
                            />
                            <defs>
                              <linearGradient
                                gradientUnits="userSpaceOnUse"
                                id="paint0_linear"
                                x1="0"
                                x2="16.0896"
                                y1="0"
                                y2="10.4478"
                              >
                                <stop
                                  stop-color="#06847B"
                                />
                                <stop
                                  offset="1"
                                  stop-color="#3EE7CD"
                                />
                              </linearGradient>
                            </defs>
                          </svg>
                        </div>
                        <div
                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
                        >
                          Glasses
                        </div>
                        <div
                          class="MenuItems-spacer-id"
                        />
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Show
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                            />
                          </svg>
                        </button>
                        <button
                          class="MuiButtonBase-root-id IconButton-secondary-id MenuItems-deleteButton-id IconButton-hoverOutline-id"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="rst__node"
                  style="height:56px"
                >
                  <div
                    class="rst__lineBlock rst__lineHalfHorizontalRight rst__lineFullVertical"
                    style="width:44px"
                  />
                  <div
                    class="rst__nodeContent"
                    style="left:44px"
                  >
                    <div
                      class="MenuItems-rowContainer-id"
                      style="margin-left:0"
                    >
                      <div
                        class="MuiPaper-root-id MenuItems-row-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                      >
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MenuItems-dragIcon-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              clip-rule="evenodd"
                              d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
                              fill="url(#paint0_linear)"
                              fill-rule="evenodd"
                              style="transform:translate(7px, 4px)"
                            />
                            <defs>
                              <linearGradient
                                gradientUnits="userSpaceOnUse"
                                id="paint0_linear"
                                x1="0"
                                x2="16.0896"
                                y1="0"
                                y2="10.4478"
                              >
                                <stop
                                  stop-color="#06847B"
                                />
                                <stop
                                  offset="1"
                                  stop-color="#3EE7CD"
                                />
                              </linearGradient>
                            </defs>
                          </svg>
                        </div>
                        <div
                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
                        >
                          Groceries
                        </div>
                        <div
                          class="MenuItems-spacer-id"
                        />
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Show
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                            />
                          </svg>
                        </button>
                        <button
                          class="MuiButtonBase-root-id IconButton-secondary-id MenuItems-deleteButton-id IconButton-hoverOutline-id"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="rst__node"
                  style="height:56px"
                >
                  <div
                    class="rst__lineBlock rst__lineHalfVerticalTop rst__lineHalfHorizontalRight"
                    style="width:44px"
                  />
                  <div
                    class="rst__nodeContent"
                    style="left:44px"
                  >
                    <div
                      class="MenuItems-rowContainer-id"
                      style="margin-left:0"
                    >
                      <div
                        class="MuiPaper-root-id MenuItems-row-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                      >
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MenuItems-dragIcon-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              clip-rule="evenodd"
                              d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
                              fill="url(#paint0_linear)"
                              fill-rule="evenodd"
                              style="transform:translate(7px, 4px)"
                            />
                            <defs>
                              <linearGradient
                                gradientUnits="userSpaceOnUse"
                                id="paint0_linear"
                                x1="0"
                                x2="16.0896"
                                y1="0"
                                y2="10.4478"
                              >
                                <stop
                                  stop-color="#06847B"
                                />
                                <stop
                                  offset="1"
                                  stop-color="#3EE7CD"
                                />
                              </linearGradient>
                            </defs>
                          </svg>
                        </div>
                        <div
                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
                        >
                          Apparel
                        </div>
                        <div
                          class="MenuItems-spacer-id"
                        />
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Show
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                            />
                          </svg>
                        </button>
                        <button
                          class="MuiButtonBase-root-id IconButton-secondary-id MenuItems-deleteButton-id IconButton-hoverOutline-id"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MenuItems-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                data-test-id="create-new-menu-item"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Create new item
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Navigation / Menu details form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-h5-id"
          >
            Navigation
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Creating the navigation structure is done by dragging and dropping. Simply create a new menu item and then drag it into its destined place. You can move items inside one another to create a tree structure and drag items up and down to create a hierarchy
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Menu Title
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="navbar"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Menu Title
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Invalid value
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Menu Items
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Undo
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MenuItems-container-id"
              style="min-height:224px;padding:;padding-top:"
            >
              <div
                class="rst__tree MenuItems-root-id"
              >
                <div
                  class="rst__node"
                  style="height:56px"
                >
                  <div
                    class="rst__lineBlock rst__lineHalfHorizontalRight rst__lineHalfVerticalBottom"
                    style="width:44px"
                  />
                  <div
                    class="rst__nodeContent"
                    style="left:44px"
                  >
                    <div
                      class="MenuItems-rowContainer-id"
                      style="margin-left:0"
                    >
                      <div
                        class="MuiPaper-root-id MenuItems-row-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                      >
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MenuItems-dragIcon-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              clip-rule="evenodd"
                              d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
                              fill="url(#paint0_linear)"
                              fill-rule="evenodd"
                              style="transform:translate(7px, 4px)"
                            />
                            <defs>
                              <linearGradient
                                gradientUnits="userSpaceOnUse"
                                id="paint0_linear"
                                x1="0"
                                x2="16.0896"
                                y1="0"
                                y2="10.4478"
                              >
                                <stop
                                  stop-color="#06847B"
                                />
                                <stop
                                  offset="1"
                                  stop-color="#3EE7CD"
                                />
                              </linearGradient>
                            </defs>
                          </svg>
                        </div>
                        <div
                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
                        >
                          Accessories
                        </div>
                        <div
                          class="MenuItems-spacer-id"
                        />
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Show
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                            />
                          </svg>
                        </button>
                        <button
                          class="MuiButtonBase-root-id IconButton-secondary-id MenuItems-deleteButton-id IconButton-hoverOutline-id"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="rst__node"
                  style="height:56px"
                >
                  <div
                    class="rst__lineBlock rst__lineFullVertical"
                    style="width:44px"
                  />
                  <div
                    class="rst__lineBlock rst__lineHalfHorizontalRight rst__lineFullVertical"
                    style="width:44px"
                  />
                  <div
                    class="rst__nodeContent"
                    style="left:88px"
                  >
                    <div
                      class="MenuItems-rowContainer-id"
                      style="margin-left:40px"
                    >
                      <div
                        class="MuiPaper-root-id MenuItems-row-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                      >
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MenuItems-dragIcon-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              clip-rule="evenodd"
                              d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
                              fill="url(#paint0_linear)"
                              fill-rule="evenodd"
                              style="transform:translate(7px, 4px)"
                            />
                            <defs>
                              <linearGradient
                                gradientUnits="userSpaceOnUse"
                                id="paint0_linear"
                                x1="0"
                                x2="16.0896"
                                y1="0"
                                y2="10.4478"
                              >
                                <stop
                                  stop-color="#06847B"
                                />
                                <stop
                                  offset="1"
                                  stop-color="#3EE7CD"
                                />
                              </linearGradient>
                            </defs>
                          </svg>
                        </div>
                        <div
                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
                        >
                          Jewelry
                        </div>
                        <div
                          class="MenuItems-spacer-id"
                        />
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Show
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                            />
                          </svg>
                        </button>
                        <button
                          class="MuiButtonBase-root-id IconButton-secondary-id MenuItems-deleteButton-id IconButton-hoverOutline-id"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="rst__node"
                  style="height:56px"
                >
                  <div
                    class="rst__lineBlock rst__lineFullVertical"
                    style="width:44px"
                  />
                  <div
                    class="rst__lineBlock rst__lineHalfVerticalTop rst__lineHalfHorizontalRight"
                    style="width:44px"
                  />
                  <div
                    class="rst__nodeContent"
                    style="left:88px"
                  >
                    <div
                      class="MenuItems-rowContainer-id"
                      style="margin-left:40px"
                    >
                      <div
                        class="MuiPaper-root-id MenuItems-row-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                      >
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MenuItems-dragIcon-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              clip-rule="evenodd"
                              d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
                              fill="url(#paint0_linear)"
                              fill-rule="evenodd"
                              style="transform:translate(7px, 4px)"
                            />
                            <defs>
                              <linearGradient
                                gradientUnits="userSpaceOnUse"
                                id="paint0_linear"
                                x1="0"
                                x2="16.0896"
                                y1="0"
                                y2="10.4478"
                              >
                                <stop
                                  stop-color="#06847B"
                                />
                                <stop
                                  offset="1"
                                  stop-color="#3EE7CD"
                                />
                              </linearGradient>
                            </defs>
                          </svg>
                        </div>
                        <div
                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
                        >
                          Glasses
                        </div>
                        <div
                          class="MenuItems-spacer-id"
                        />
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Show
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                            />
                          </svg>
                        </button>
                        <button
                          class="MuiButtonBase-root-id IconButton-secondary-id MenuItems-deleteButton-id IconButton-hoverOutline-id"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="rst__node"
                  style="height:56px"
                >
                  <div
                    class="rst__lineBlock rst__lineHalfHorizontalRight rst__lineFullVertical"
                    style="width:44px"
                  />
                  <div
                    class="rst__nodeContent"
                    style="left:44px"
                  >
                    <div
                      class="MenuItems-rowContainer-id"
                      style="margin-left:0"
                    >
                      <div
                        class="MuiPaper-root-id MenuItems-row-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                      >
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MenuItems-dragIcon-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              clip-rule="evenodd"
                              d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
                              fill="url(#paint0_linear)"
                              fill-rule="evenodd"
                              style="transform:translate(7px, 4px)"
                            />
                            <defs>
                              <linearGradient
                                gradientUnits="userSpaceOnUse"
                                id="paint0_linear"
                                x1="0"
                                x2="16.0896"
                                y1="0"
                                y2="10.4478"
                              >
                                <stop
                                  stop-color="#06847B"
                                />
                                <stop
                                  offset="1"
                                  stop-color="#3EE7CD"
                                />
                              </linearGradient>
                            </defs>
                          </svg>
                        </div>
                        <div
                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
                        >
                          Groceries
                        </div>
                        <div
                          class="MenuItems-spacer-id"
                        />
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Show
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                            />
                          </svg>
                        </button>
                        <button
                          class="MuiButtonBase-root-id IconButton-secondary-id MenuItems-deleteButton-id IconButton-hoverOutline-id"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="rst__node"
                  style="height:56px"
                >
                  <div
                    class="rst__lineBlock rst__lineHalfVerticalTop rst__lineHalfHorizontalRight"
                    style="width:44px"
                  />
                  <div
                    class="rst__nodeContent"
                    style="left:44px"
                  >
                    <div
                      class="MenuItems-rowContainer-id"
                      style="margin-left:0"
                    >
                      <div
                        class="MuiPaper-root-id MenuItems-row-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                      >
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MenuItems-dragIcon-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              clip-rule="evenodd"
                              d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
                              fill="url(#paint0_linear)"
                              fill-rule="evenodd"
                              style="transform:translate(7px, 4px)"
                            />
                            <defs>
                              <linearGradient
                                gradientUnits="userSpaceOnUse"
                                id="paint0_linear"
                                x1="0"
                                x2="16.0896"
                                y1="0"
                                y2="10.4478"
                              >
                                <stop
                                  stop-color="#06847B"
                                />
                                <stop
                                  offset="1"
                                  stop-color="#3EE7CD"
                                />
                              </linearGradient>
                            </defs>
                          </svg>
                        </div>
                        <div
                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
                        >
                          Apparel
                        </div>
                        <div
                          class="MenuItems-spacer-id"
                        />
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Show
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                            />
                          </svg>
                        </button>
                        <button
                          class="MuiButtonBase-root-id IconButton-secondary-id MenuItems-deleteButton-id IconButton-hoverOutline-id"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MenuItems-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                data-test-id="create-new-menu-item"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Create new item
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Navigation / Menu details loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-h5-id"
          >
            Navigation
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Creating the navigation structure is done by dragging and dropping. Simply create a new menu item and then drag it into its destined place. You can move items inside one another to create a tree structure and drag items up and down to create a hierarchy
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Menu Title
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Menu Title
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Menu Items
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Undo
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MenuItems-container-id"
              style="min-height:-56px;padding:;padding-top:"
            >
              <div
                class="rst__tree MenuItems-root-id"
              >
                <div>
                  <div
                    class="MuiPaper-root-id MenuItems-row-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Add new menu item to begin creating menu
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MenuItems-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                data-test-id="create-new-menu-item"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Create new item
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Navigation / Menu details no data 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-h5-id"
          >
            Navigation
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Creating the navigation structure is done by dragging and dropping. Simply create a new menu item and then drag it into its destined place. You can move items inside one another to create a tree structure and drag items up and down to create a hierarchy
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Menu Title
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="navbar"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Menu Title
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Menu Items
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Undo
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MenuItems-container-id"
              style="min-height:-56px;padding:;padding-top:"
            >
              <div
                class="rst__tree MenuItems-root-id"
              >
                <div>
                  <div
                    class="MuiPaper-root-id MenuItems-row-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Add new menu item to begin creating menu
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MenuItems-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                data-test-id="create-new-menu-item"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Create new item
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Navigation / Menu list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Navigation
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="add-menu"
            href="/navigation?action=add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Menu
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="ResponsiveTable-root-id"
      >
        <a
          class="TableRowLink-link-id"
          href="/navigation/TWVudTox"
        />
        <a
          class="TableRowLink-link-id"
          href="/navigation/TWVudToy"
        />
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id MenuList-colTitle-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Menu Title
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id MenuList-colItems-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Items
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id MenuList-colAction-id"
                scope="col"
              />
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id MenuList-row-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MenuList-colTitle-id"
              >
                navbar
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MenuList-colItems-id"
              >
                3
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id MenuList-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MenuList-row-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MenuList-colTitle-id"
              >
                footer
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MenuList-colItems-id"
              >
                2
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id MenuList-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Navigation / Menu list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Navigation
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="add-menu"
            href="/navigation?action=add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Menu
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id MenuList-colTitle-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Menu Title
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id MenuList-colItems-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Items
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id MenuList-colAction-id"
                scope="col"
              />
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id MenuList-row-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MenuList-colTitle-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MenuList-colItems-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id MenuList-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
                  color="primary"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Navigation / Menu list no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Navigation
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="add-menu"
            href="/navigation?action=add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Menu
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id MenuList-colTitle-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Menu Title
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id MenuList-colItems-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Items
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id MenuList-colAction-id"
                scope="col"
              />
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
                colspan="4"
              >
                No menus found
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Not found error page default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="NotFoundPage-root-id"
  >
    <div
      class="NotFoundPage-container-id"
    >
      <div
        class="NotFoundPage-innerContainer-id"
      >
        <div>
          <div
            class="MuiTypography-root-id NotFoundPage-header-id MuiTypography-h3-id"
          >
            Ooops!...
          </div>
          <div
            class="MuiTypography-root-id NotFoundPage-header-id MuiTypography-h4-id"
          >
            Something's missing
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Sorry, the page was not found
          </div>
        </div>
        <div>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id NotFoundPage-button-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Go back to dashboard
            </span>
          </button>
        </div>
      </div>
      <div />
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Draft order list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Draft Orders
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            230/500 orders
          </div>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create order
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Drafts
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Draft"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MjA%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTk%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTg%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTc%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTY%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTU%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTQ%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTM%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTI%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTE%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTA%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6OQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6OA%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6Nw%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6Ng%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6NQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6NA%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6Mw%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6Mg%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MQ%3D%3D"
        />
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderDraftList-colNumber-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Order
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderDraftList-colDate-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Date
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderDraftList-colCustomer-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Customer
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderDraftList-colTotal-id TableCellHeader-notSortable-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Total
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="5"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #20
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658650376"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Laura Stone 1 2
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                305.17
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #19
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658650124"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Elizabeth Vaughn
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                1,215.89
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #18
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658650019"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                david.lawson@example.com
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                321.71
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #17
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658649864"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Aaron Randall
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                271.95
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #16
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658649610"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Laura Jensen
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                335.84
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #15
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658649336"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Jenna Villa
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                1,042.15
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #14
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658649103"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Wesley Davis
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                213.69
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #13
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648921"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Anthony Gonzalez
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                367.03
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #12
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648750"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Denise Freeman
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                298.76
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #11
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648598"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                James Ball
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                663.69
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #10
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648409"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Michael Martinez
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                280.41
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #9
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648185"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Melissa Simon
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                234.93
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #8
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647953"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Justin Mccoy
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                485.19
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #7
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647828"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Anthony Gonzalez
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                223.54
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #6
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647636"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Bradley Ford
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                237.55
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #5
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647420"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                David Lawson
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                453.55
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #4
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647230"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Lauren Watson
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                812.67
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #3
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658646972"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Mark Lee
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                481.41
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #2
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658646751"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Kara Murphy
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                569.19
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #1
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658646314"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Curtis Bailey
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                557.00
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Draft order list limits reached 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Draft Orders
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            500/500 orders
          </div>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
            disabled=""
            tabindex="-1"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create order
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id LimitReachedAlert-root-id Alert-root-id Alert-warning-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      data-test="alert"
    >
      <div
        class="MuiCardContent-root-id"
      >
        <div
          class="Alert-container-id"
        >
          <div
            class="Alert-icon-id"
          >
            <svg
              class="Alert-warning-id"
              fill="none"
              height="40"
              viewBox="0 0 40 40"
              width="40"
              xmlns="http://www.w3.org/2000/svg"
            >
              <circle
                cx="20"
                cy="20"
                fill="var(--background-paper)"
                r="20"
              />
              <circle
                cx="20"
                cy="20"
                r="14"
                stroke="currentColor"
                stroke-width="4"
              />
              <path
                clip-rule="evenodd"
                d="M19.5 11C18.6716 11 18 11.6716 18 12.5V20.5C18 21.3284 18.6716 22 19.5 22H20.5C21.3284 22 22 21.3284 22 20.5V12.5C22 11.6716 21.3284 11 20.5 11H19.5ZM19.5 25C18.6716 25 18 25.6716 18 26.5V27.5C18 28.3284 18.6716 29 19.5 29H20.5C21.3284 29 22 28.3284 22 27.5V26.5C22 25.6716 21.3284 25 20.5 25H19.5Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
          </div>
          <div
            class="Alert-content-id"
          >
            <div
              class="Alert-titleBar-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-h5-id"
              >
                Order limit reached
              </div>
              <button
                class="MuiButtonBase-root-id IconButton-secondary-id Alert-close-id"
                data-test="close"
                tabindex="0"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="25"
                  viewBox="0 0 24 25"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    clip-rule="evenodd"
                    d="M7.53 6.472a.75.75 0 1 0-1.06 1.06l4.47 4.47-4.47 4.47a.75.75 0 0 0 1.06 1.06l4.47-4.47 4.47 4.47a.75.75 0 1 0 1.06-1.06l-4.47-4.47 4.47-4.47a.75.75 0 0 0-1.06-1.06L12 10.942l-4.47-4.47Z"
                    fill="currentColor"
                    fill-rule="evenodd"
                  />
                </svg>
              </button>
            </div>
            You have reached your order limit, you will be billed extra for orders above limit. If you would like to up your limit, contact your administration staff about raising your limits.
          </div>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Drafts
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Draft"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MjA%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTk%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTg%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTc%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTY%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTU%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTQ%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTM%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTI%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTE%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTA%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6OQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6OA%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6Nw%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6Ng%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6NQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6NA%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6Mw%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6Mg%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MQ%3D%3D"
        />
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderDraftList-colNumber-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Order
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderDraftList-colDate-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Date
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderDraftList-colCustomer-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Customer
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderDraftList-colTotal-id TableCellHeader-notSortable-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Total
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="5"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #20
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658650376"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Laura Stone 1 2
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                305.17
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #19
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658650124"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Elizabeth Vaughn
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                1,215.89
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #18
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658650019"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                david.lawson@example.com
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                321.71
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #17
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658649864"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Aaron Randall
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                271.95
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #16
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658649610"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Laura Jensen
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                335.84
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #15
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658649336"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Jenna Villa
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                1,042.15
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #14
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658649103"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Wesley Davis
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                213.69
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #13
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648921"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Anthony Gonzalez
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                367.03
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #12
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648750"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Denise Freeman
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                298.76
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #11
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648598"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                James Ball
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                663.69
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #10
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648409"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Michael Martinez
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                280.41
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #9
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648185"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Melissa Simon
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                234.93
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #8
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647953"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Justin Mccoy
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                485.19
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #7
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647828"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Anthony Gonzalez
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                223.54
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #6
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647636"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Bradley Ford
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                237.55
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #5
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647420"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                David Lawson
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                453.55
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #4
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647230"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Lauren Watson
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                812.67
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #3
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658646972"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Mark Lee
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                481.41
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #2
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658646751"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Kara Murphy
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                569.19
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                #1
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658646314"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Curtis Bailey
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                557.00
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Draft order list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Draft Orders
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            230/500 orders
          </div>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
            disabled=""
            tabindex="-1"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create order
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Drafts
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Draft"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderDraftList-colNumber-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Order
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderDraftList-colDate-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Date
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderDraftList-colCustomer-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Customer
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderDraftList-colTotal-id TableCellHeader-notSortable-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Total
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="5"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id"
              data-test-id="draft-order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Draft order list when no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Draft Orders
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            230/500 orders
          </div>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create order
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Drafts
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Draft"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderDraftList-colNumber-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Order
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderDraftList-colDate-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Date
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderDraftList-colCustomer-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Customer
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderDraftList-colTotal-id TableCellHeader-notSortable-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Total
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
                colspan="4"
              >
                No draft orders found
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Order no. 9123 - Add Fulfillment
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="MuiTypography-root-id OrderFulfillPage-warehouseLabel-id MuiTypography-body1-id"
    >
      Fulfilling from C our wares
    </div>
    <form>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Items ready to ship
              </span>
            </div>
          </div>
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderFulfillPage-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colName-id"
                    scope="col"
                  >
                    Product name
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colSku-id"
                    scope="col"
                  >
                    SKU
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colQuantity-id OrderFulfillPage-colQuantityHeader-id"
                    scope="col"
                  >
                    Quantity
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colStock-id"
                    scope="col"
                  >
                    Stock
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillLine-colName-id"
                    data-test-id="table-cell-avatar"
                    thumbnail="sample-product.jpg"
                  >
                    <div
                      class="Avatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="sample-product.jpg"
                        />
                      </div>
                      <div
                        class="Avatar-children-id"
                      >
                        T-Shirt
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          S
                        </div>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colSku-id"
                  >
                    62783187
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colQuantity-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillLine-quantityInnerInput-id OrderFulfillLine-quantityInnerInputNoRemaining-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          min="0"
                          style="text-align:right"
                          type="number"
                          value="2"
                        />
                        <div
                          class="OrderFulfillLine-remainingQuantity-id"
                        >
                          / 2
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colStock-id"
                  >
                    1207
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillLine-colName-id"
                    data-test-id="table-cell-avatar"
                    thumbnail="sample-product.jpg"
                  >
                    <div
                      class="Avatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="sample-product.jpg"
                        />
                      </div>
                      <div
                        class="Avatar-children-id"
                      >
                        Lemon Juice
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          2.5l
                        </div>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colSku-id"
                  >
                    998323583
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colQuantity-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillLine-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          min="0"
                          style="text-align:right"
                          type="number"
                          value="4"
                        />
                        <div
                          class="OrderFulfillLine-remainingQuantity-id"
                        >
                          / 4
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id OrderFulfillLine-warning-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colStock-id"
                  >
                    0
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillLine-colName-id"
                    data-test-id="table-cell-avatar"
                    thumbnail="sample-product.jpg"
                  >
                    <div
                      class="Avatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="sample-product.jpg"
                        />
                      </div>
                      <div
                        class="Avatar-children-id"
                      >
                        Orange Juice
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          5l
                        </div>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colSku-id"
                  >
                    998323584
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colQuantity-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillLine-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          min="0"
                          style="text-align:right"
                          type="number"
                          value="1"
                        />
                        <div
                          class="OrderFulfillLine-remainingQuantity-id"
                        >
                          / 1
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colStock-id"
                  >
                    587
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id OrderFulfillPage-shipmentInformationCard-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiTypography-root-id OrderFulfillPage-supportHeader-id MuiTypography-body1-id"
          >
            Shipment information
          </div>
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
              data-shrink="false"
            >
              Tracking number
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="trackingNumber"
                type="text"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id"
                >
                  <span>
                    Tracking number
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Fulfill order error 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Order no. 9123 - Add Fulfillment
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="MuiTypography-root-id OrderFulfillPage-warehouseLabel-id MuiTypography-body1-id"
    >
      Fulfilling from C our wares
    </div>
    <form>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Items ready to ship
              </span>
            </div>
          </div>
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderFulfillPage-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colName-id"
                    scope="col"
                  >
                    Product name
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colSku-id"
                    scope="col"
                  >
                    SKU
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colQuantity-id OrderFulfillPage-colQuantityHeader-id"
                    scope="col"
                  >
                    Quantity
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colStock-id"
                    scope="col"
                  >
                    Stock
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillLine-colName-id"
                    data-test-id="table-cell-avatar"
                    thumbnail="sample-product.jpg"
                  >
                    <div
                      class="Avatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="sample-product.jpg"
                        />
                      </div>
                      <div
                        class="Avatar-children-id"
                      >
                        T-Shirt
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          S
                        </div>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colSku-id"
                  >
                    62783187
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colQuantity-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillLine-quantityInnerInput-id OrderFulfillLine-quantityInnerInputNoRemaining-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          min="0"
                          style="text-align:right"
                          type="number"
                          value="2"
                        />
                        <div
                          class="OrderFulfillLine-remainingQuantity-id"
                        >
                          / 2
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colStock-id"
                  >
                    1207
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillLine-colName-id"
                    data-test-id="table-cell-avatar"
                    thumbnail="sample-product.jpg"
                  >
                    <div
                      class="Avatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="sample-product.jpg"
                        />
                      </div>
                      <div
                        class="Avatar-children-id"
                      >
                        Lemon Juice
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          2.5l
                        </div>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colSku-id"
                  >
                    998323583
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colQuantity-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillLine-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          min="0"
                          style="text-align:right"
                          type="number"
                          value="4"
                        />
                        <div
                          class="OrderFulfillLine-remainingQuantity-id"
                        >
                          / 4
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id OrderFulfillLine-warning-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colStock-id"
                  >
                    0
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillLine-colName-id"
                    data-test-id="table-cell-avatar"
                    thumbnail="sample-product.jpg"
                  >
                    <div
                      class="Avatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="sample-product.jpg"
                        />
                      </div>
                      <div
                        class="Avatar-children-id"
                      >
                        Orange Juice
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          5l
                        </div>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colSku-id"
                  >
                    998323584
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colQuantity-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillLine-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          min="0"
                          style="text-align:right"
                          type="number"
                          value="1"
                        />
                        <div
                          class="OrderFulfillLine-remainingQuantity-id"
                        >
                          / 1
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colStock-id"
                  >
                    587
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id OrderFulfillPage-shipmentInformationCard-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiTypography-root-id OrderFulfillPage-supportHeader-id MuiTypography-body1-id"
          >
            Shipment information
          </div>
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
              data-shrink="false"
            >
              Tracking number
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="trackingNumber"
                type="text"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id"
                >
                  <span>
                    Tracking number
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Fulfill order loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Order no.  - Add Fulfillment
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="MuiTypography-root-id OrderFulfillPage-warehouseLabel-id MuiTypography-body1-id"
    >
      Fulfilling from 
    </div>
    <form>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Items ready to ship
              </span>
            </div>
          </div>
          <span
            class="Skeleton-skeleton-id"
            data-test-id="skeleton"
          >
            ‌
          </span>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id OrderFulfillPage-shipmentInformationCard-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiTypography-root-id OrderFulfillPage-supportHeader-id MuiTypography-body1-id"
          >
            Shipment information
          </div>
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
              data-shrink="false"
            >
              Tracking number
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="trackingNumber"
                type="text"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id"
                >
                  <span>
                    Tracking number
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Fulfill order one warehouse 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Order no. 9123 - Add Fulfillment
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="MuiTypography-root-id OrderFulfillPage-warehouseLabel-id MuiTypography-body1-id"
    >
      Fulfilling from C our wares
    </div>
    <form>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Items ready to ship
              </span>
            </div>
          </div>
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderFulfillPage-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colName-id"
                    scope="col"
                  >
                    Product name
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colSku-id"
                    scope="col"
                  >
                    SKU
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colQuantity-id OrderFulfillPage-colQuantityHeader-id"
                    scope="col"
                  >
                    Quantity
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colStock-id"
                    scope="col"
                  >
                    Stock
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillLine-colName-id"
                    data-test-id="table-cell-avatar"
                    thumbnail="sample-product.jpg"
                  >
                    <div
                      class="Avatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="sample-product.jpg"
                        />
                      </div>
                      <div
                        class="Avatar-children-id"
                      >
                        T-Shirt
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          S
                        </div>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colSku-id"
                  >
                    62783187
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colQuantity-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillLine-quantityInnerInput-id OrderFulfillLine-quantityInnerInputNoRemaining-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          min="0"
                          style="text-align:right"
                          type="number"
                          value="2"
                        />
                        <div
                          class="OrderFulfillLine-remainingQuantity-id"
                        >
                          / 2
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colStock-id"
                  >
                    1207
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillLine-colName-id"
                    data-test-id="table-cell-avatar"
                    thumbnail="sample-product.jpg"
                  >
                    <div
                      class="Avatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="sample-product.jpg"
                        />
                      </div>
                      <div
                        class="Avatar-children-id"
                      >
                        Lemon Juice
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          2.5l
                        </div>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colSku-id"
                  >
                    998323583
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colQuantity-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillLine-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          min="0"
                          style="text-align:right"
                          type="number"
                          value="4"
                        />
                        <div
                          class="OrderFulfillLine-remainingQuantity-id"
                        >
                          / 4
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id OrderFulfillLine-warning-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colStock-id"
                  >
                    0
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillLine-colName-id"
                    data-test-id="table-cell-avatar"
                    thumbnail="sample-product.jpg"
                  >
                    <div
                      class="Avatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="sample-product.jpg"
                        />
                      </div>
                      <div
                        class="Avatar-children-id"
                      >
                        Orange Juice
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          5l
                        </div>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colSku-id"
                  >
                    998323584
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colQuantity-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillLine-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          min="0"
                          style="text-align:right"
                          type="number"
                          value="1"
                        />
                        <div
                          class="OrderFulfillLine-remainingQuantity-id"
                        >
                          / 1
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colStock-id"
                  >
                    587
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id OrderFulfillPage-shipmentInformationCard-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiTypography-root-id OrderFulfillPage-supportHeader-id MuiTypography-body1-id"
          >
            Shipment information
          </div>
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
              data-shrink="false"
            >
              Tracking number
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="trackingNumber"
                type="text"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id"
                >
                  <span>
                    Tracking number
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            <div
              class="OrderDetailsTitle-container-id"
            >
              Order #9
              <div
                class="OrderDetailsTitle-statusContainer-id"
              >
                <div
                  class="MuiChip-root-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Cancelled
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
              data-test-id="show-more-button"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    clip-rule="evenodd"
                    d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                    fill="currentColor"
                    fill-rule="evenodd"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="OrderDetailsPage-date-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body2-id"
        >
          <time
            class=""
            datetime="1536658648185"
            title="Sep 11, 2018 5:37 AM"
          >
            in a month
          </time>
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div
          data-test-id="order-fulfillment"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id OrderUnfulfilledItems-cardTitle-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-error-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Unfulfilled (3)
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <div
                  class="OrderUnfulfilledItems-toolbar-id"
                >
                  <div>
                    <span
                      class="Skeleton-skeleton-id"
                      data-test-id="skeleton"
                    >
                      ‌
                    </span>
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </div>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderUnfulfilledItems-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Watkins-Gonzalez (Soft)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      59-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      3
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      18.51
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      55.53
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-error-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Canceled (1)
                    </div>
                    <div
                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
                    >
                      Fulfilled from Be stocked
                    </div>
                  </div>
                </span>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Williams, Garcia and Walker (XS)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      5-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      1
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-error-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Canceled (1)
                    </div>
                    <div
                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
                    >
                      Fulfilled from C our wares
                    </div>
                  </div>
                </span>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Williams, Garcia and Walker (XS)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      5-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      1
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                  </tr>
                </tbody>
                <tbody>
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id OrderFulfilledProductsCard-infoRow-id"
                      colspan="5"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Fulfilled from: 
                        <div
                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id OrderFulfilledProductsCard-infoLabelWithMargin-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          C our wares
                        </div>
                      </div>
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Tracking Number: 
                        <div
                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          01nn12399su12nndfsy
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderPayment-header-id"
                  >
                    <div
                      class="OrderPayment-titleContainer-id"
                    >
                      Payment status
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiChip-root-id Pill-root-id Pill-error-id"
                      >
                        <span
                          class="MuiChip-label-id Pill-label-id"
                        >
                          Unpaid
                        </span>
                      </div>
                    </div>
                  </div>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Subtotal
                    </td>
                    <td>
                      5 items
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      214.95
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Taxes
                    </td>
                    <td>
                      does not apply
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Shipping
                    </td>
                    <td>
                      Registred priority
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      19.98
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Total
                    </td>
                    <td />
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Preauthorized amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Captured amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Refunded amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Outstanding Balance
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.key"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          some-value
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="OrderHistory-root-id"
          >
            <div
              class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Order History
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="Timeline-root-id"
            >
              <div
                class="Timeline-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id Timeline-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="message"
                        placeholder="Leave your note here..."
                        rows="1"
                      />
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Payment was authorized
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Order refund information was sent to customer
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Order cancel information was sent to customer
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Note from external service
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineNote-root-id"
              >
                <div
                  class="TimelineNote-title-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
                <div
                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
                >
                  <div
                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      This is note
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineNote-root-id"
              >
                <div
                  class="TimelineNote-title-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
                <div
                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
                >
                  <div
                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      This is note
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiAccordionSummary-content-id"
                    >
                      <div
                        class="TimelineEventHeader-container-id"
                      >
                        <div
                          class="TimelineEventHeader-elementsContainer-id"
                        >
                          <div
                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id MuiTypography-body1-id"
                          >
                            Products were refunded by 
                          </div>
                          <a
                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                          >
                            Jane Doe
                          </a>
                        </div>
                        <div
                          class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                        >
                          <time
                            class=""
                            datetime="1537190544376"
                            title="Sep 17, 2018 9:22 AM"
                          >
                            in a month
                          </time>
                        </div>
                      </div>
                    </div>
                    <div
                      aria-disabled="false"
                      aria-hidden="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
                          />
                        </svg>
                      </span>
                    </div>
                  </div>
                  <div
                    class="MuiCollapse-container-id MuiCollapse-hidden-id"
                    style="min-height:0px"
                  >
                    <div
                      class="MuiCollapse-wrapper-id"
                    >
                      <div
                        class="MuiCollapse-wrapperInner-id"
                      >
                        <div
                          role="region"
                        >
                          <div
                            class="MuiAccordionDetails-root-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:12px"
                              >
                                Products refunded
                              </div>
                              <table>
                                <tbody>
                                  <tr>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      Milk
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        Cow's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        qty: 4
                                      </div>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      Milk
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        Goat's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        qty: 4
                                      </div>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                Shipment was refunded
                              </div>
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:12px"
                              >
                                Transaction reference
                              </div>
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                123
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Fulfilled 1 items
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1537190544376"
                      title="Sep 17, 2018 9:22 AM"
                    >
                      in a month
                    </time>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Customer
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
              >
                melissa.simon@example.com
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="OrderCustomer-sectionHeader-id"
              >
                <div
                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
                >
                  Shipping Address
                </div>
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Melissa Simon
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                487 Roberto Shores
                <br />
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                66272 West Patriciastad
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Wyspy Salomona
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
              >
                Fulfill from All Warehouses
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="OrderCustomer-sectionHeader-id"
              >
                <div
                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
                >
                  Billing Address
                </div>
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Same as shipping address
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="order-sales-channel"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Sales channel
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Default Channel
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Invoices
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id OrderInvoiceList-cardContentTable-id"
            >
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id OrderInvoiceList-invoicesTable-id"
                >
                  <tbody
                    class="MuiTableBody-root-id OrderInvoiceList-invoicesTableBody-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-hover-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
                      >
                        Invoice 1
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          created Jun 22, 2020
                        </div>
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Send
                          </span>
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Notes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Lorem ipsum dolor sit amet
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Orders / Order details default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            <div
              class="OrderDetailsTitle-container-id"
            >
              Order #9
              <div
                class="OrderDetailsTitle-statusContainer-id"
              >
                <div
                  class="MuiChip-root-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
              data-test-id="show-more-button"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    clip-rule="evenodd"
                    d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                    fill="currentColor"
                    fill-rule="evenodd"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="OrderDetailsPage-date-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body2-id"
        >
          <time
            class=""
            datetime="1536658648185"
            title="Sep 11, 2018 5:37 AM"
          >
            in a month
          </time>
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div
          data-test-id="order-fulfillment"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id OrderUnfulfilledItems-cardTitle-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-error-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Unfulfilled (3)
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <div
                  class="OrderUnfulfilledItems-toolbar-id"
                >
                  <div>
                    <span
                      class="Skeleton-skeleton-id"
                      data-test-id="skeleton"
                    >
                      ‌
                    </span>
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </div>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderUnfulfilledItems-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Watkins-Gonzalez (Soft)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      59-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      3
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      18.51
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      55.53
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Fulfill
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Fulfilled (1)
                    </div>
                    <div
                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
                    >
                      Fulfilled from Be stocked
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                  data-test-id="cancel-fulfillment-button"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <svg
                      fill="none"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clip-rule="evenodd"
                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
                        fill="#28234A"
                        fill-opacity="0.6"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </svg>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Williams, Garcia and Walker (XS)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      5-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      1
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add tracking
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Fulfilled (1)
                    </div>
                    <div
                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
                    >
                      Fulfilled from C our wares
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                  data-test-id="cancel-fulfillment-button"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <svg
                      fill="none"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clip-rule="evenodd"
                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
                        fill="#28234A"
                        fill-opacity="0.6"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </svg>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Williams, Garcia and Walker (XS)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      5-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      1
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                  </tr>
                </tbody>
                <tbody>
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id OrderFulfilledProductsCard-infoRow-id"
                      colspan="5"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Fulfilled from: 
                        <div
                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id OrderFulfilledProductsCard-infoLabelWithMargin-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          C our wares
                        </div>
                      </div>
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Tracking Number: 
                        <div
                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          01nn12399su12nndfsy
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Edit tracking
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderPayment-header-id"
                  >
                    <div
                      class="OrderPayment-titleContainer-id"
                    >
                      Payment status
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiChip-root-id Pill-root-id Pill-error-id"
                      >
                        <span
                          class="MuiChip-label-id Pill-label-id"
                        >
                          Unpaid
                        </span>
                      </div>
                    </div>
                    <div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Capture
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        data-test-id="refund-button"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Refund
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Refund
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Mark as paid
                        </span>
                      </button>
                    </div>
                  </div>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Subtotal
                    </td>
                    <td>
                      5 items
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      214.95
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Taxes
                    </td>
                    <td>
                      does not apply
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Shipping
                    </td>
                    <td>
                      Registred priority
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      19.98
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Total
                    </td>
                    <td />
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Preauthorized amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Captured amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Refunded amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Outstanding Balance
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.key"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          some-value
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="OrderHistory-root-id"
          >
            <div
              class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Order History
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="Timeline-root-id"
            >
              <div
                class="Timeline-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id Timeline-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="message"
                        placeholder="Leave your note here..."
                        rows="1"
                      />
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Payment was authorized
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Order refund information was sent to customer
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Order cancel information was sent to customer
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Note from external service
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineNote-root-id"
              >
                <div
                  class="TimelineNote-title-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
                <div
                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
                >
                  <div
                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      This is note
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineNote-root-id"
              >
                <div
                  class="TimelineNote-title-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
                <div
                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
                >
                  <div
                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      This is note
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiAccordionSummary-content-id"
                    >
                      <div
                        class="TimelineEventHeader-container-id"
                      >
                        <div
                          class="TimelineEventHeader-elementsContainer-id"
                        >
                          <div
                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id MuiTypography-body1-id"
                          >
                            Products were refunded by 
                          </div>
                          <a
                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                          >
                            Jane Doe
                          </a>
                        </div>
                        <div
                          class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                        >
                          <time
                            class=""
                            datetime="1537190544376"
                            title="Sep 17, 2018 9:22 AM"
                          >
                            in a month
                          </time>
                        </div>
                      </div>
                    </div>
                    <div
                      aria-disabled="false"
                      aria-hidden="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
                          />
                        </svg>
                      </span>
                    </div>
                  </div>
                  <div
                    class="MuiCollapse-container-id MuiCollapse-hidden-id"
                    style="min-height:0px"
                  >
                    <div
                      class="MuiCollapse-wrapper-id"
                    >
                      <div
                        class="MuiCollapse-wrapperInner-id"
                      >
                        <div
                          role="region"
                        >
                          <div
                            class="MuiAccordionDetails-root-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:12px"
                              >
                                Products refunded
                              </div>
                              <table>
                                <tbody>
                                  <tr>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      Milk
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        Cow's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        qty: 4
                                      </div>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      Milk
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        Goat's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        qty: 4
                                      </div>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                Shipment was refunded
                              </div>
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:12px"
                              >
                                Transaction reference
                              </div>
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                123
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Fulfilled 1 items
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1537190544376"
                      title="Sep 17, 2018 9:22 AM"
                    >
                      in a month
                    </time>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Customer
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
              >
                melissa.simon@example.com
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="OrderCustomer-sectionHeader-id"
              >
                <div
                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
                >
                  Shipping Address
                </div>
                <div
                  class="OrderCustomer-sectionHeaderToolbar-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                    data-test-id="edit-shipping-address"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiButton-label-id"
                    >
                      Edit
                    </span>
                  </button>
                </div>
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Melissa Simon
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                487 Roberto Shores
                <br />
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                66272 West Patriciastad
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Wyspy Salomona
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
              >
                Fulfill from All Warehouses
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="OrderCustomer-sectionHeader-id"
              >
                <div
                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
                >
                  Billing Address
                </div>
                <div
                  class="OrderCustomer-sectionHeaderToolbar-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                    data-test-id="edit-billing-address"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiButton-label-id"
                    >
                      Edit
                    </span>
                  </button>
                </div>
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Same as shipping address
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="order-sales-channel"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Sales channel
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Default Channel
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Invoices
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id OrderInvoiceList-cardContentTable-id"
            >
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id OrderInvoiceList-invoicesTable-id"
                >
                  <tbody
                    class="MuiTableBody-root-id OrderInvoiceList-invoicesTableBody-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-hover-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
                      >
                        Invoice 1
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          created Jun 22, 2020
                        </div>
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Send
                          </span>
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Notes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Lorem ipsum dolor sit amet
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            <div
              class="OrderDetailsTitle-container-id"
            >
              Order #9
              <div
                class="OrderDetailsTitle-statusContainer-id"
              >
                <div
                  class="MuiChip-root-id Pill-root-id Pill-success-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Fulfilled
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
              data-test-id="show-more-button"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    clip-rule="evenodd"
                    d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                    fill="currentColor"
                    fill-rule="evenodd"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="OrderDetailsPage-date-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body2-id"
        >
          <time
            class=""
            datetime="1536658648185"
            title="Sep 11, 2018 5:37 AM"
          >
            in a month
          </time>
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div
          data-test-id="order-fulfillment"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id OrderUnfulfilledItems-cardTitle-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-error-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Unfulfilled (3)
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <div
                  class="OrderUnfulfilledItems-toolbar-id"
                >
                  <div>
                    <span
                      class="Skeleton-skeleton-id"
                      data-test-id="skeleton"
                    >
                      ‌
                    </span>
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </div>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderUnfulfilledItems-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Watkins-Gonzalez (Soft)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      59-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      3
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      18.51
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      55.53
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Fulfill
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Fulfilled (1)
                    </div>
                    <div
                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
                    >
                      Fulfilled from Be stocked
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                  data-test-id="cancel-fulfillment-button"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <svg
                      fill="none"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clip-rule="evenodd"
                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
                        fill="#28234A"
                        fill-opacity="0.6"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </svg>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Williams, Garcia and Walker (XS)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      5-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      1
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add tracking
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Fulfilled (1)
                    </div>
                    <div
                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
                    >
                      Fulfilled from C our wares
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                  data-test-id="cancel-fulfillment-button"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <svg
                      fill="none"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clip-rule="evenodd"
                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
                        fill="#28234A"
                        fill-opacity="0.6"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </svg>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Williams, Garcia and Walker (XS)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      5-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      1
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                  </tr>
                </tbody>
                <tbody>
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id OrderFulfilledProductsCard-infoRow-id"
                      colspan="5"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Fulfilled from: 
                        <div
                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id OrderFulfilledProductsCard-infoLabelWithMargin-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          C our wares
                        </div>
                      </div>
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Tracking Number: 
                        <div
                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          01nn12399su12nndfsy
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Edit tracking
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderPayment-header-id"
                  >
                    <div
                      class="OrderPayment-titleContainer-id"
                    >
                      Payment status
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiChip-root-id Pill-root-id Pill-error-id"
                      >
                        <span
                          class="MuiChip-label-id Pill-label-id"
                        >
                          Unpaid
                        </span>
                      </div>
                    </div>
                    <div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Capture
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        data-test-id="refund-button"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Refund
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Refund
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Mark as paid
                        </span>
                      </button>
                    </div>
                  </div>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Subtotal
                    </td>
                    <td>
                      5 items
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      214.95
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Taxes
                    </td>
                    <td>
                      does not apply
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Shipping
                    </td>
                    <td>
                      Registred priority
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      19.98
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Total
                    </td>
                    <td />
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Preauthorized amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Captured amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Refunded amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Outstanding Balance
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.key"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          some-value
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="OrderHistory-root-id"
          >
            <div
              class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Order History
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="Timeline-root-id"
            >
              <div
                class="Timeline-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id Timeline-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="message"
                        placeholder="Leave your note here..."
                        rows="1"
                      />
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Payment was authorized
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Order refund information was sent to customer
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Order cancel information was sent to customer
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Note from external service
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineNote-root-id"
              >
                <div
                  class="TimelineNote-title-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
                <div
                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
                >
                  <div
                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      This is note
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineNote-root-id"
              >
                <div
                  class="TimelineNote-title-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
                <div
                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
                >
                  <div
                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      This is note
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiAccordionSummary-content-id"
                    >
                      <div
                        class="TimelineEventHeader-container-id"
                      >
                        <div
                          class="TimelineEventHeader-elementsContainer-id"
                        >
                          <div
                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id MuiTypography-body1-id"
                          >
                            Products were refunded by 
                          </div>
                          <a
                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                          >
                            Jane Doe
                          </a>
                        </div>
                        <div
                          class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                        >
                          <time
                            class=""
                            datetime="1537190544376"
                            title="Sep 17, 2018 9:22 AM"
                          >
                            in a month
                          </time>
                        </div>
                      </div>
                    </div>
                    <div
                      aria-disabled="false"
                      aria-hidden="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
                          />
                        </svg>
                      </span>
                    </div>
                  </div>
                  <div
                    class="MuiCollapse-container-id MuiCollapse-hidden-id"
                    style="min-height:0px"
                  >
                    <div
                      class="MuiCollapse-wrapper-id"
                    >
                      <div
                        class="MuiCollapse-wrapperInner-id"
                      >
                        <div
                          role="region"
                        >
                          <div
                            class="MuiAccordionDetails-root-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:12px"
                              >
                                Products refunded
                              </div>
                              <table>
                                <tbody>
                                  <tr>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      Milk
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        Cow's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        qty: 4
                                      </div>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      Milk
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        Goat's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        qty: 4
                                      </div>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                Shipment was refunded
                              </div>
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:12px"
                              >
                                Transaction reference
                              </div>
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                123
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Fulfilled 1 items
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1537190544376"
                      title="Sep 17, 2018 9:22 AM"
                    >
                      in a month
                    </time>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Customer
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
              >
                melissa.simon@example.com
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="OrderCustomer-sectionHeader-id"
              >
                <div
                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
                >
                  Shipping Address
                </div>
                <div
                  class="OrderCustomer-sectionHeaderToolbar-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                    data-test-id="edit-shipping-address"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiButton-label-id"
                    >
                      Edit
                    </span>
                  </button>
                </div>
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Melissa Simon
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                487 Roberto Shores
                <br />
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                66272 West Patriciastad
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Wyspy Salomona
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
              >
                Fulfill from All Warehouses
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="OrderCustomer-sectionHeader-id"
              >
                <div
                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
                >
                  Billing Address
                </div>
                <div
                  class="OrderCustomer-sectionHeaderToolbar-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                    data-test-id="edit-billing-address"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiButton-label-id"
                    >
                      Edit
                    </span>
                  </button>
                </div>
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Same as shipping address
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="order-sales-channel"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Sales channel
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Default Channel
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Invoices
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id OrderInvoiceList-cardContentTable-id"
            >
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id OrderInvoiceList-invoicesTable-id"
                >
                  <tbody
                    class="MuiTableBody-root-id OrderInvoiceList-invoicesTableBody-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-hover-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
                      >
                        Invoice 1
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          created Jun 22, 2020
                        </div>
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Send
                          </span>
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Notes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Lorem ipsum dolor sit amet
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Orders / Order details loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          />
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
              data-test-id="show-more-button"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    clip-rule="evenodd"
                    d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                    fill="currentColor"
                    fill-rule="evenodd"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="OrderDetailsPage-date-id"
      >
        <span
          class="Skeleton-skeleton-id"
          data-test-id="skeleton"
          style="width:10em"
        >
          ‌
        </span>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div
          data-test-id="order-fulfillment"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                    data-test-id="skeleton"
                  >
                    ‌
                  </span>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Subtotal
                    </td>
                    <td>
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Taxes
                    </td>
                    <td>
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Shipping
                    </td>
                    <td>
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Total
                    </td>
                    <td />
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Preauthorized amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Captured amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Refunded amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Outstanding Balance
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
          </div>
          <div
            class="OrderHistory-root-id"
          >
            <div
              class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Order History
            </div>
            <hr
              class="Hr-root-id"
            />
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
            >
              ‌
            </span>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Customer
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="OrderCustomer-sectionHeader-id"
              >
                <div
                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
                >
                  Shipping Address
                </div>
                <div
                  class="OrderCustomer-sectionHeaderToolbar-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                    data-test-id="edit-shipping-address"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiButton-label-id"
                    >
                      Edit
                    </span>
                  </button>
                </div>
              </div>
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="OrderCustomer-sectionHeader-id"
              >
                <div
                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
                >
                  Billing Address
                </div>
                <div
                  class="OrderCustomer-sectionHeaderToolbar-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                    data-test-id="edit-billing-address"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiButton-label-id"
                    >
                      Edit
                    </span>
                  </button>
                </div>
              </div>
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="order-sales-channel"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Sales channel
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Invoices
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Notes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            <div
              class="OrderDetailsTitle-container-id"
            >
              Order #9
              <div
                class="OrderDetailsTitle-statusContainer-id"
              >
                <div
                  class="MuiChip-root-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
              data-test-id="show-more-button"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    clip-rule="evenodd"
                    d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                    fill="currentColor"
                    fill-rule="evenodd"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="OrderDetailsPage-date-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body2-id"
        >
          <time
            class=""
            datetime="1536658648185"
            title="Sep 11, 2018 5:37 AM"
          >
            in a month
          </time>
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div
          data-test-id="order-fulfillment"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id OrderUnfulfilledItems-cardTitle-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-error-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Unfulfilled (3)
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <div
                  class="OrderUnfulfilledItems-toolbar-id"
                >
                  <div>
                    <span
                      class="Skeleton-skeleton-id"
                      data-test-id="skeleton"
                    >
                      ‌
                    </span>
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </div>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderUnfulfilledItems-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Watkins-Gonzalez (Soft)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      59-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      3
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      18.51
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      55.53
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Fulfill
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Fulfilled (1)
                    </div>
                    <div
                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
                    >
                      Fulfilled from Be stocked
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                  data-test-id="cancel-fulfillment-button"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <svg
                      fill="none"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clip-rule="evenodd"
                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
                        fill="#28234A"
                        fill-opacity="0.6"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </svg>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Williams, Garcia and Walker (XS)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      5-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      1
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add tracking
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Fulfilled (1)
                    </div>
                    <div
                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
                    >
                      Fulfilled from C our wares
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                  data-test-id="cancel-fulfillment-button"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <svg
                      fill="none"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clip-rule="evenodd"
                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
                        fill="#28234A"
                        fill-opacity="0.6"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </svg>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Williams, Garcia and Walker (XS)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      5-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      1
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                  </tr>
                </tbody>
                <tbody>
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id OrderFulfilledProductsCard-infoRow-id"
                      colspan="5"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Fulfilled from: 
                        <div
                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id OrderFulfilledProductsCard-infoLabelWithMargin-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          C our wares
                        </div>
                      </div>
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Tracking Number: 
                        <div
                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          01nn12399su12nndfsy
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Edit tracking
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderPayment-header-id"
                  >
                    <div
                      class="OrderPayment-titleContainer-id"
                    >
                      Payment status
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiChip-root-id Pill-root-id Pill-error-id"
                      >
                        <span
                          class="MuiChip-label-id Pill-label-id"
                        >
                          Unpaid
                        </span>
                      </div>
                    </div>
                    <div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Capture
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        data-test-id="refund-button"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Refund
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Refund
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Mark as paid
                        </span>
                      </button>
                    </div>
                  </div>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Subtotal
                    </td>
                    <td>
                      5 items
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      214.95
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Taxes
                    </td>
                    <td>
                      does not apply
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Shipping
                    </td>
                    <td>
                      Registred priority
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      19.98
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Total
                    </td>
                    <td />
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Preauthorized amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Captured amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Refunded amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Outstanding Balance
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.key"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          some-value
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="OrderHistory-root-id"
          >
            <div
              class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Order History
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="Timeline-root-id"
            >
              <div
                class="Timeline-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id Timeline-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="message"
                        placeholder="Leave your note here..."
                        rows="1"
                      />
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Payment was authorized
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Order refund information was sent to customer
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Order cancel information was sent to customer
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Note from external service
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineNote-root-id"
              >
                <div
                  class="TimelineNote-title-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
                <div
                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
                >
                  <div
                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      This is note
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineNote-root-id"
              >
                <div
                  class="TimelineNote-title-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
                <div
                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
                >
                  <div
                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      This is note
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiAccordionSummary-content-id"
                    >
                      <div
                        class="TimelineEventHeader-container-id"
                      >
                        <div
                          class="TimelineEventHeader-elementsContainer-id"
                        >
                          <div
                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id MuiTypography-body1-id"
                          >
                            Products were refunded by 
                          </div>
                          <a
                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                          >
                            Jane Doe
                          </a>
                        </div>
                        <div
                          class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                        >
                          <time
                            class=""
                            datetime="1537190544376"
                            title="Sep 17, 2018 9:22 AM"
                          >
                            in a month
                          </time>
                        </div>
                      </div>
                    </div>
                    <div
                      aria-disabled="false"
                      aria-hidden="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
                          />
                        </svg>
                      </span>
                    </div>
                  </div>
                  <div
                    class="MuiCollapse-container-id MuiCollapse-hidden-id"
                    style="min-height:0px"
                  >
                    <div
                      class="MuiCollapse-wrapper-id"
                    >
                      <div
                        class="MuiCollapse-wrapperInner-id"
                      >
                        <div
                          role="region"
                        >
                          <div
                            class="MuiAccordionDetails-root-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:12px"
                              >
                                Products refunded
                              </div>
                              <table>
                                <tbody>
                                  <tr>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      Milk
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        Cow's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        qty: 4
                                      </div>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      Milk
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        Goat's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        qty: 4
                                      </div>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                Shipment was refunded
                              </div>
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:12px"
                              >
                                Transaction reference
                              </div>
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                123
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Fulfilled 1 items
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1537190544376"
                      title="Sep 17, 2018 9:22 AM"
                    >
                      in a month
                    </time>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Customer
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
              >
                melissa.simon@example.com
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="OrderCustomer-sectionHeader-id"
              >
                <div
                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
                >
                  Shipping Address
                </div>
                <div
                  class="OrderCustomer-sectionHeaderToolbar-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                    data-test-id="edit-shipping-address"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiButton-label-id"
                    >
                      Edit
                    </span>
                  </button>
                </div>
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Melissa Simon
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                487 Roberto Shores
                <br />
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                66272 West Patriciastad
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Wyspy Salomona
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
              >
                Fulfill from All Warehouses
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="OrderCustomer-sectionHeader-id"
              >
                <div
                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
                >
                  Billing Address
                </div>
                <div
                  class="OrderCustomer-sectionHeaderToolbar-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                    data-test-id="edit-billing-address"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiButton-label-id"
                    >
                      Edit
                    </span>
                  </button>
                </div>
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Same as shipping address
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="order-sales-channel"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Sales channel
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Default Channel
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Invoices
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id OrderInvoiceList-cardContentTable-id"
            >
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id OrderInvoiceList-invoicesTable-id"
                >
                  <tbody
                    class="MuiTableBody-root-id OrderInvoiceList-invoicesTableBody-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-hover-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
                      >
                        Invoice 1
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          created Jun 22, 2020
                        </div>
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Send
                          </span>
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Notes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                No notes from customer
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Orders / Order details no payment 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            <div
              class="OrderDetailsTitle-container-id"
            >
              Order #9
              <div
                class="OrderDetailsTitle-statusContainer-id"
              >
                <div
                  class="MuiChip-root-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
              data-test-id="show-more-button"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    clip-rule="evenodd"
                    d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                    fill="currentColor"
                    fill-rule="evenodd"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="OrderDetailsPage-date-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body2-id"
        >
          <time
            class=""
            datetime="1536658648185"
            title="Sep 11, 2018 5:37 AM"
          >
            in a month
          </time>
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div
          data-test-id="order-fulfillment"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id OrderUnfulfilledItems-cardTitle-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-error-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Unfulfilled (3)
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <div
                  class="OrderUnfulfilledItems-toolbar-id"
                >
                  <div>
                    <span
                      class="Skeleton-skeleton-id"
                      data-test-id="skeleton"
                    >
                      ‌
                    </span>
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </div>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderUnfulfilledItems-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Watkins-Gonzalez (Soft)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      59-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      3
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      18.51
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      55.53
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Fulfill
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Fulfilled (1)
                    </div>
                    <div
                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
                    >
                      Fulfilled from Be stocked
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                  data-test-id="cancel-fulfillment-button"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <svg
                      fill="none"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clip-rule="evenodd"
                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
                        fill="#28234A"
                        fill-opacity="0.6"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </svg>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Williams, Garcia and Walker (XS)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      5-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      1
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add tracking
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Fulfilled (1)
                    </div>
                    <div
                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
                    >
                      Fulfilled from C our wares
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                  data-test-id="cancel-fulfillment-button"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <svg
                      fill="none"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clip-rule="evenodd"
                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
                        fill="#28234A"
                        fill-opacity="0.6"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </svg>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Williams, Garcia and Walker (XS)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      5-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      1
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                  </tr>
                </tbody>
                <tbody>
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id OrderFulfilledProductsCard-infoRow-id"
                      colspan="5"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Fulfilled from: 
                        <div
                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id OrderFulfilledProductsCard-infoLabelWithMargin-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          C our wares
                        </div>
                      </div>
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Tracking Number: 
                        <div
                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          01nn12399su12nndfsy
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Edit tracking
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                    data-test-id="skeleton"
                  >
                    ‌
                  </span>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Subtotal
                    </td>
                    <td>
                      5 items
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      214.95
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Taxes
                    </td>
                    <td>
                      does not apply
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Shipping
                    </td>
                    <td>
                      Registred priority
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      19.98
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Total
                    </td>
                    <td />
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Preauthorized amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Captured amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Refunded amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Outstanding Balance
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.key"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          some-value
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="OrderHistory-root-id"
          >
            <div
              class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Order History
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="Timeline-root-id"
            >
              <div
                class="Timeline-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id Timeline-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="message"
                        placeholder="Leave your note here..."
                        rows="1"
                      />
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Payment was authorized
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Order refund information was sent to customer
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Order cancel information was sent to customer
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Note from external service
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineNote-root-id"
              >
                <div
                  class="TimelineNote-title-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
                <div
                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
                >
                  <div
                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      This is note
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineNote-root-id"
              >
                <div
                  class="TimelineNote-title-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
                <div
                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
                >
                  <div
                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      This is note
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiAccordionSummary-content-id"
                    >
                      <div
                        class="TimelineEventHeader-container-id"
                      >
                        <div
                          class="TimelineEventHeader-elementsContainer-id"
                        >
                          <div
                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id MuiTypography-body1-id"
                          >
                            Products were refunded by 
                          </div>
                          <a
                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                          >
                            Jane Doe
                          </a>
                        </div>
                        <div
                          class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                        >
                          <time
                            class=""
                            datetime="1537190544376"
                            title="Sep 17, 2018 9:22 AM"
                          >
                            in a month
                          </time>
                        </div>
                      </div>
                    </div>
                    <div
                      aria-disabled="false"
                      aria-hidden="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
                          />
                        </svg>
                      </span>
                    </div>
                  </div>
                  <div
                    class="MuiCollapse-container-id MuiCollapse-hidden-id"
                    style="min-height:0px"
                  >
                    <div
                      class="MuiCollapse-wrapper-id"
                    >
                      <div
                        class="MuiCollapse-wrapperInner-id"
                      >
                        <div
                          role="region"
                        >
                          <div
                            class="MuiAccordionDetails-root-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:12px"
                              >
                                Products refunded
                              </div>
                              <table>
                                <tbody>
                                  <tr>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      Milk
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        Cow's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        qty: 4
                                      </div>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      Milk
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        Goat's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        qty: 4
                                      </div>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                Shipment was refunded
                              </div>
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:12px"
                              >
                                Transaction reference
                              </div>
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                123
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Fulfilled 1 items
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1537190544376"
                      title="Sep 17, 2018 9:22 AM"
                    >
                      in a month
                    </time>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Customer
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
              >
                melissa.simon@example.com
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="OrderCustomer-sectionHeader-id"
              >
                <div
                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
                >
                  Shipping Address
                </div>
                <div
                  class="OrderCustomer-sectionHeaderToolbar-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                    data-test-id="edit-shipping-address"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiButton-label-id"
                    >
                      Edit
                    </span>
                  </button>
                </div>
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Melissa Simon
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                487 Roberto Shores
                <br />
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                66272 West Patriciastad
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Wyspy Salomona
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
              >
                Fulfill from All Warehouses
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="OrderCustomer-sectionHeader-id"
              >
                <div
                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
                >
                  Billing Address
                </div>
                <div
                  class="OrderCustomer-sectionHeaderToolbar-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                    data-test-id="edit-billing-address"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiButton-label-id"
                    >
                      Edit
                    </span>
                  </button>
                </div>
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Same as shipping address
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="order-sales-channel"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Sales channel
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Default Channel
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Invoices
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id OrderInvoiceList-cardContentTable-id"
            >
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id OrderInvoiceList-invoicesTable-id"
                >
                  <tbody
                    class="MuiTableBody-root-id OrderInvoiceList-invoicesTableBody-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-hover-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
                      >
                        Invoice 1
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          created Jun 22, 2020
                        </div>
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Send
                          </span>
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Notes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Lorem ipsum dolor sit amet
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            <div
              class="OrderDetailsTitle-container-id"
            >
              Order #9
              <div
                class="OrderDetailsTitle-statusContainer-id"
              >
                <div
                  class="MuiChip-root-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
              data-test-id="show-more-button"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    clip-rule="evenodd"
                    d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                    fill="currentColor"
                    fill-rule="evenodd"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="OrderDetailsPage-date-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body2-id"
        >
          <time
            class=""
            datetime="1536658648185"
            title="Sep 11, 2018 5:37 AM"
          >
            in a month
          </time>
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div
          data-test-id="order-fulfillment"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id OrderUnfulfilledItems-cardTitle-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-error-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Unfulfilled (3)
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <div
                  class="OrderUnfulfilledItems-toolbar-id"
                >
                  <div>
                    <span
                      class="Skeleton-skeleton-id"
                      data-test-id="skeleton"
                    >
                      ‌
                    </span>
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </div>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderUnfulfilledItems-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Watkins-Gonzalez (Soft)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      59-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      3
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      18.51
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      55.53
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Fulfill
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Fulfilled (1)
                    </div>
                    <div
                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
                    >
                      Fulfilled from Be stocked
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                  data-test-id="cancel-fulfillment-button"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <svg
                      fill="none"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clip-rule="evenodd"
                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
                        fill="#28234A"
                        fill-opacity="0.6"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </svg>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Williams, Garcia and Walker (XS)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      5-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      1
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add tracking
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Fulfilled (1)
                    </div>
                    <div
                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
                    >
                      Fulfilled from C our wares
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                  data-test-id="cancel-fulfillment-button"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <svg
                      fill="none"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clip-rule="evenodd"
                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
                        fill="#28234A"
                        fill-opacity="0.6"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </svg>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Williams, Garcia and Walker (XS)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      5-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      1
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                  </tr>
                </tbody>
                <tbody>
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id OrderFulfilledProductsCard-infoRow-id"
                      colspan="5"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Fulfilled from: 
                        <div
                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id OrderFulfilledProductsCard-infoLabelWithMargin-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          C our wares
                        </div>
                      </div>
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Tracking Number: 
                        <div
                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          01nn12399su12nndfsy
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Edit tracking
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderPayment-header-id"
                  >
                    <div
                      class="OrderPayment-titleContainer-id"
                    >
                      Payment status
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiChip-root-id Pill-root-id Pill-error-id"
                      >
                        <span
                          class="MuiChip-label-id Pill-label-id"
                        >
                          Unpaid
                        </span>
                      </div>
                    </div>
                    <div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Capture
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        data-test-id="refund-button"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Refund
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Refund
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Mark as paid
                        </span>
                      </button>
                    </div>
                  </div>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Subtotal
                    </td>
                    <td>
                      5 items
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      214.95
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Taxes
                    </td>
                    <td>
                      does not apply
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Shipping
                    </td>
                    <td>
                      Registred priority
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      19.98
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Total
                    </td>
                    <td />
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Preauthorized amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Captured amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Refunded amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Outstanding Balance
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.key"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          some-value
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="OrderHistory-root-id"
          >
            <div
              class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Order History
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="Timeline-root-id"
            >
              <div
                class="Timeline-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id Timeline-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="message"
                        placeholder="Leave your note here..."
                        rows="1"
                      />
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Payment was authorized
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Order refund information was sent to customer
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Order cancel information was sent to customer
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Note from external service
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineNote-root-id"
              >
                <div
                  class="TimelineNote-title-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
                <div
                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
                >
                  <div
                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      This is note
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineNote-root-id"
              >
                <div
                  class="TimelineNote-title-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
                <div
                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
                >
                  <div
                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      This is note
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiAccordionSummary-content-id"
                    >
                      <div
                        class="TimelineEventHeader-container-id"
                      >
                        <div
                          class="TimelineEventHeader-elementsContainer-id"
                        >
                          <div
                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id MuiTypography-body1-id"
                          >
                            Products were refunded by 
                          </div>
                          <a
                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                          >
                            Jane Doe
                          </a>
                        </div>
                        <div
                          class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                        >
                          <time
                            class=""
                            datetime="1537190544376"
                            title="Sep 17, 2018 9:22 AM"
                          >
                            in a month
                          </time>
                        </div>
                      </div>
                    </div>
                    <div
                      aria-disabled="false"
                      aria-hidden="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
                          />
                        </svg>
                      </span>
                    </div>
                  </div>
                  <div
                    class="MuiCollapse-container-id MuiCollapse-hidden-id"
                    style="min-height:0px"
                  >
                    <div
                      class="MuiCollapse-wrapper-id"
                    >
                      <div
                        class="MuiCollapse-wrapperInner-id"
                      >
                        <div
                          role="region"
                        >
                          <div
                            class="MuiAccordionDetails-root-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:12px"
                              >
                                Products refunded
                              </div>
                              <table>
                                <tbody>
                                  <tr>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      Milk
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        Cow's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        qty: 4
                                      </div>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      Milk
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        Goat's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        qty: 4
                                      </div>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                Shipment was refunded
                              </div>
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:12px"
                              >
                                Transaction reference
                              </div>
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                123
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Fulfilled 1 items
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1537190544376"
                      title="Sep 17, 2018 9:22 AM"
                    >
                      in a month
                    </time>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Customer
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
              >
                melissa.simon@example.com
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="OrderCustomer-sectionHeader-id"
              >
                <div
                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
                >
                  Shipping Address
                </div>
                <div
                  class="OrderCustomer-sectionHeaderToolbar-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                    data-test-id="edit-shipping-address"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiButton-label-id"
                    >
                      Edit
                    </span>
                  </button>
                </div>
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Not set
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="OrderCustomer-sectionHeader-id"
              >
                <div
                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
                >
                  Billing Address
                </div>
                <div
                  class="OrderCustomer-sectionHeaderToolbar-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                    data-test-id="edit-billing-address"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiButton-label-id"
                    >
                      Edit
                    </span>
                  </button>
                </div>
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Melissa Simon
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                487 Roberto Shores
                <br />
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                66272 West Patriciastad
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Wyspy Salomona
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              />
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="order-sales-channel"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Sales channel
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Default Channel
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Invoices
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id OrderInvoiceList-cardContentTable-id"
            >
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id OrderInvoiceList-invoicesTable-id"
                >
                  <tbody
                    class="MuiTableBody-root-id OrderInvoiceList-invoicesTableBody-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-hover-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
                      >
                        Invoice 1
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          created Jun 22, 2020
                        </div>
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Send
                          </span>
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Notes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Lorem ipsum dolor sit amet
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            <div
              class="OrderDetailsTitle-container-id"
            >
              Order #9
              <div
                class="OrderDetailsTitle-statusContainer-id"
              >
                <div
                  class="MuiChip-root-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
              data-test-id="show-more-button"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    clip-rule="evenodd"
                    d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                    fill="currentColor"
                    fill-rule="evenodd"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="OrderDetailsPage-date-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body2-id"
        >
          <time
            class=""
            datetime="1536658648185"
            title="Sep 11, 2018 5:37 AM"
          >
            in a month
          </time>
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div
          data-test-id="order-fulfillment"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id OrderUnfulfilledItems-cardTitle-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-error-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Unfulfilled (3)
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <div
                  class="OrderUnfulfilledItems-toolbar-id"
                >
                  <div>
                    <span
                      class="Skeleton-skeleton-id"
                      data-test-id="skeleton"
                    >
                      ‌
                    </span>
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </div>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderUnfulfilledItems-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Watkins-Gonzalez (Soft)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      59-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      3
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      18.51
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      55.53
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Fulfill
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Fulfilled (1)
                    </div>
                    <div
                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
                    >
                      Fulfilled from Be stocked
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                  data-test-id="cancel-fulfillment-button"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <svg
                      fill="none"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clip-rule="evenodd"
                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
                        fill="#28234A"
                        fill-opacity="0.6"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </svg>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Williams, Garcia and Walker (XS)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      5-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      1
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add tracking
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Fulfilled (1)
                    </div>
                    <div
                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
                    >
                      Fulfilled from C our wares
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                  data-test-id="cancel-fulfillment-button"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <svg
                      fill="none"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clip-rule="evenodd"
                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
                        fill="#28234A"
                        fill-opacity="0.6"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </svg>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Williams, Garcia and Walker (XS)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      5-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      1
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                  </tr>
                </tbody>
                <tbody>
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id OrderFulfilledProductsCard-infoRow-id"
                      colspan="5"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Fulfilled from: 
                        <div
                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id OrderFulfilledProductsCard-infoLabelWithMargin-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          C our wares
                        </div>
                      </div>
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Tracking Number: 
                        <div
                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          01nn12399su12nndfsy
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Edit tracking
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderPayment-header-id"
                  >
                    <div
                      class="OrderPayment-titleContainer-id"
                    >
                      Payment status
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiChip-root-id Pill-root-id Pill-error-id"
                      >
                        <span
                          class="MuiChip-label-id Pill-label-id"
                        >
                          Unpaid
                        </span>
                      </div>
                    </div>
                    <div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Capture
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        data-test-id="refund-button"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Refund
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Refund
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Mark as paid
                        </span>
                      </button>
                    </div>
                  </div>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Subtotal
                    </td>
                    <td>
                      5 items
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      214.95
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Taxes
                    </td>
                    <td>
                      does not apply
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Shipping
                    </td>
                    <td>
                      Registred priority
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      19.98
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Total
                    </td>
                    <td />
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Preauthorized amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Captured amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Refunded amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Outstanding Balance
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.key"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          some-value
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="OrderHistory-root-id"
          >
            <div
              class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Order History
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="Timeline-root-id"
            >
              <div
                class="Timeline-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id Timeline-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="message"
                        placeholder="Leave your note here..."
                        rows="1"
                      />
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Payment was authorized
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Order refund information was sent to customer
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Order cancel information was sent to customer
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Note from external service
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineNote-root-id"
              >
                <div
                  class="TimelineNote-title-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
                <div
                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
                >
                  <div
                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      This is note
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineNote-root-id"
              >
                <div
                  class="TimelineNote-title-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
                <div
                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
                >
                  <div
                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      This is note
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiAccordionSummary-content-id"
                    >
                      <div
                        class="TimelineEventHeader-container-id"
                      >
                        <div
                          class="TimelineEventHeader-elementsContainer-id"
                        >
                          <div
                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id MuiTypography-body1-id"
                          >
                            Products were refunded by 
                          </div>
                          <a
                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                          >
                            Jane Doe
                          </a>
                        </div>
                        <div
                          class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                        >
                          <time
                            class=""
                            datetime="1537190544376"
                            title="Sep 17, 2018 9:22 AM"
                          >
                            in a month
                          </time>
                        </div>
                      </div>
                    </div>
                    <div
                      aria-disabled="false"
                      aria-hidden="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
                          />
                        </svg>
                      </span>
                    </div>
                  </div>
                  <div
                    class="MuiCollapse-container-id MuiCollapse-hidden-id"
                    style="min-height:0px"
                  >
                    <div
                      class="MuiCollapse-wrapper-id"
                    >
                      <div
                        class="MuiCollapse-wrapperInner-id"
                      >
                        <div
                          role="region"
                        >
                          <div
                            class="MuiAccordionDetails-root-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:12px"
                              >
                                Products refunded
                              </div>
                              <table>
                                <tbody>
                                  <tr>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      Milk
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        Cow's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        qty: 4
                                      </div>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      Milk
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        Goat's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        qty: 4
                                      </div>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                Shipment was refunded
                              </div>
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:12px"
                              >
                                Transaction reference
                              </div>
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                123
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Fulfilled 1 items
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1537190544376"
                      title="Sep 17, 2018 9:22 AM"
                    >
                      in a month
                    </time>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Customer
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
              >
                melissa.simon@example.com
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="OrderCustomer-sectionHeader-id"
              >
                <div
                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
                >
                  Shipping Address
                </div>
                <div
                  class="OrderCustomer-sectionHeaderToolbar-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                    data-test-id="edit-shipping-address"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiButton-label-id"
                    >
                      Edit
                    </span>
                  </button>
                </div>
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Melissa Simon
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                487 Roberto Shores
                <br />
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                66272 West Patriciastad
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Wyspy Salomona
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
              >
                Fulfill from All Warehouses
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="OrderCustomer-sectionHeader-id"
              >
                <div
                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
                >
                  Billing Address
                </div>
                <div
                  class="OrderCustomer-sectionHeaderToolbar-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                    data-test-id="edit-billing-address"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiButton-label-id"
                    >
                      Edit
                    </span>
                  </button>
                </div>
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Same as shipping address
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="order-sales-channel"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Sales channel
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Default Channel
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Invoices
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id OrderInvoiceList-cardContentTable-id"
            >
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id OrderInvoiceList-invoicesTable-id"
                >
                  <tbody
                    class="MuiTableBody-root-id OrderInvoiceList-invoicesTableBody-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-hover-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
                      >
                        Invoice 1
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          created Jun 22, 2020
                        </div>
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Send
                          </span>
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Notes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Lorem ipsum dolor sit amet
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            <div
              class="OrderDetailsTitle-container-id"
            >
              Order #9
              <div
                class="OrderDetailsTitle-statusContainer-id"
              >
                <div
                  class="MuiChip-root-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
              data-test-id="show-more-button"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    clip-rule="evenodd"
                    d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                    fill="currentColor"
                    fill-rule="evenodd"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="OrderDetailsPage-date-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body2-id"
        >
          <time
            class=""
            datetime="1536658648185"
            title="Sep 11, 2018 5:37 AM"
          >
            in a month
          </time>
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div
          data-test-id="order-fulfillment"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id OrderUnfulfilledItems-cardTitle-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-error-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Unfulfilled (3)
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <div
                  class="OrderUnfulfilledItems-toolbar-id"
                >
                  <div>
                    <span
                      class="Skeleton-skeleton-id"
                      data-test-id="skeleton"
                    >
                      ‌
                    </span>
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </div>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderUnfulfilledItems-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Watkins-Gonzalez (Soft)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      59-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      3
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      18.51
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      55.53
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Fulfill
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Fulfilled (1)
                    </div>
                    <div
                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
                    >
                      Fulfilled from Be stocked
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                  data-test-id="cancel-fulfillment-button"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <svg
                      fill="none"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clip-rule="evenodd"
                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
                        fill="#28234A"
                        fill-opacity="0.6"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </svg>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Williams, Garcia and Walker (XS)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      5-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      1
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add tracking
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Fulfilled (1)
                    </div>
                    <div
                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
                    >
                      Fulfilled from C our wares
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                  data-test-id="cancel-fulfillment-button"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <svg
                      fill="none"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clip-rule="evenodd"
                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
                        fill="#28234A"
                        fill-opacity="0.6"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </svg>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Williams, Garcia and Walker (XS)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      5-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      1
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                  </tr>
                </tbody>
                <tbody>
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id OrderFulfilledProductsCard-infoRow-id"
                      colspan="5"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Fulfilled from: 
                        <div
                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id OrderFulfilledProductsCard-infoLabelWithMargin-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          C our wares
                        </div>
                      </div>
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Tracking Number: 
                        <div
                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          01nn12399su12nndfsy
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Edit tracking
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderPayment-header-id"
                  >
                    <div
                      class="OrderPayment-titleContainer-id"
                    >
                      Payment status
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiChip-root-id Pill-root-id Pill-success-id"
                      >
                        <span
                          class="MuiChip-label-id Pill-label-id"
                        >
                          Fully paid
                        </span>
                      </div>
                    </div>
                    <div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Capture
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        data-test-id="refund-button"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Refund
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Refund
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Mark as paid
                        </span>
                      </button>
                    </div>
                  </div>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Subtotal
                    </td>
                    <td>
                      5 items
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      214.95
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Taxes
                    </td>
                    <td>
                      does not apply
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Shipping
                    </td>
                    <td>
                      Registred priority
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      19.98
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Total
                    </td>
                    <td />
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Preauthorized amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Captured amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Refunded amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Outstanding Balance
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.key"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          some-value
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="OrderHistory-root-id"
          >
            <div
              class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Order History
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="Timeline-root-id"
            >
              <div
                class="Timeline-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id Timeline-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="message"
                        placeholder="Leave your note here..."
                        rows="1"
                      />
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Payment was authorized
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Order refund information was sent to customer
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Order cancel information was sent to customer
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Note from external service
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineNote-root-id"
              >
                <div
                  class="TimelineNote-title-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
                <div
                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
                >
                  <div
                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      This is note
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineNote-root-id"
              >
                <div
                  class="TimelineNote-title-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
                <div
                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
                >
                  <div
                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      This is note
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiAccordionSummary-content-id"
                    >
                      <div
                        class="TimelineEventHeader-container-id"
                      >
                        <div
                          class="TimelineEventHeader-elementsContainer-id"
                        >
                          <div
                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id MuiTypography-body1-id"
                          >
                            Products were refunded by 
                          </div>
                          <a
                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                          >
                            Jane Doe
                          </a>
                        </div>
                        <div
                          class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                        >
                          <time
                            class=""
                            datetime="1537190544376"
                            title="Sep 17, 2018 9:22 AM"
                          >
                            in a month
                          </time>
                        </div>
                      </div>
                    </div>
                    <div
                      aria-disabled="false"
                      aria-hidden="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
                          />
                        </svg>
                      </span>
                    </div>
                  </div>
                  <div
                    class="MuiCollapse-container-id MuiCollapse-hidden-id"
                    style="min-height:0px"
                  >
                    <div
                      class="MuiCollapse-wrapper-id"
                    >
                      <div
                        class="MuiCollapse-wrapperInner-id"
                      >
                        <div
                          role="region"
                        >
                          <div
                            class="MuiAccordionDetails-root-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:12px"
                              >
                                Products refunded
                              </div>
                              <table>
                                <tbody>
                                  <tr>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      Milk
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        Cow's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        qty: 4
                                      </div>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      Milk
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        Goat's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        qty: 4
                                      </div>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                Shipment was refunded
                              </div>
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:12px"
                              >
                                Transaction reference
                              </div>
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                123
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Fulfilled 1 items
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1537190544376"
                      title="Sep 17, 2018 9:22 AM"
                    >
                      in a month
                    </time>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Customer
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
              >
                melissa.simon@example.com
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="OrderCustomer-sectionHeader-id"
              >
                <div
                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
                >
                  Shipping Address
                </div>
                <div
                  class="OrderCustomer-sectionHeaderToolbar-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                    data-test-id="edit-shipping-address"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiButton-label-id"
                    >
                      Edit
                    </span>
                  </button>
                </div>
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Melissa Simon
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                487 Roberto Shores
                <br />
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                66272 West Patriciastad
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Wyspy Salomona
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
              >
                Fulfill from All Warehouses
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="OrderCustomer-sectionHeader-id"
              >
                <div
                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
                >
                  Billing Address
                </div>
                <div
                  class="OrderCustomer-sectionHeaderToolbar-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                    data-test-id="edit-billing-address"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiButton-label-id"
                    >
                      Edit
                    </span>
                  </button>
                </div>
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Same as shipping address
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="order-sales-channel"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Sales channel
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Default Channel
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Invoices
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id OrderInvoiceList-cardContentTable-id"
            >
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id OrderInvoiceList-invoicesTable-id"
                >
                  <tbody
                    class="MuiTableBody-root-id OrderInvoiceList-invoicesTableBody-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-hover-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
                      >
                        Invoice 1
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          created Jun 22, 2020
                        </div>
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Send
                          </span>
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Notes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Lorem ipsum dolor sit amet
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Orders / Order details payment error 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            <div
              class="OrderDetailsTitle-container-id"
            >
              Order #9
              <div
                class="OrderDetailsTitle-statusContainer-id"
              >
                <div
                  class="MuiChip-root-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
              data-test-id="show-more-button"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    clip-rule="evenodd"
                    d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                    fill="currentColor"
                    fill-rule="evenodd"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="OrderDetailsPage-date-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body2-id"
        >
          <time
            class=""
            datetime="1536658648185"
            title="Sep 11, 2018 5:37 AM"
          >
            in a month
          </time>
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div
          data-test-id="order-fulfillment"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id OrderUnfulfilledItems-cardTitle-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-error-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Unfulfilled (3)
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <div
                  class="OrderUnfulfilledItems-toolbar-id"
                >
                  <div>
                    <span
                      class="Skeleton-skeleton-id"
                      data-test-id="skeleton"
                    >
                      ‌
                    </span>
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </div>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderUnfulfilledItems-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Watkins-Gonzalez (Soft)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      59-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      3
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      18.51
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      55.53
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Fulfill
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Fulfilled (1)
                    </div>
                    <div
                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
                    >
                      Fulfilled from Be stocked
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                  data-test-id="cancel-fulfillment-button"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <svg
                      fill="none"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clip-rule="evenodd"
                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
                        fill="#28234A"
                        fill-opacity="0.6"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </svg>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Williams, Garcia and Walker (XS)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      5-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      1
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add tracking
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Fulfilled (1)
                    </div>
                    <div
                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
                    >
                      Fulfilled from C our wares
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                  data-test-id="cancel-fulfillment-button"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <svg
                      fill="none"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clip-rule="evenodd"
                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
                        fill="#28234A"
                        fill-opacity="0.6"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </svg>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Williams, Garcia and Walker (XS)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      5-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      1
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                  </tr>
                </tbody>
                <tbody>
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id OrderFulfilledProductsCard-infoRow-id"
                      colspan="5"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Fulfilled from: 
                        <div
                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id OrderFulfilledProductsCard-infoLabelWithMargin-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          C our wares
                        </div>
                      </div>
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Tracking Number: 
                        <div
                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          01nn12399su12nndfsy
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Edit tracking
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderPayment-header-id"
                  >
                    <div
                      class="OrderPayment-titleContainer-id"
                    >
                      Payment status
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiChip-root-id Pill-root-id Pill-error-id"
                      >
                        <span
                          class="MuiChip-label-id Pill-label-id"
                        >
                          Unpaid
                        </span>
                      </div>
                    </div>
                    <div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Capture
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        data-test-id="refund-button"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Refund
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Refund
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Mark as paid
                        </span>
                      </button>
                    </div>
                  </div>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Subtotal
                    </td>
                    <td>
                      5 items
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      214.95
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Taxes
                    </td>
                    <td>
                      does not apply
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Shipping
                    </td>
                    <td>
                      Registred priority
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      19.98
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Total
                    </td>
                    <td />
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Preauthorized amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Captured amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Refunded amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Outstanding Balance
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.key"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          some-value
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="OrderHistory-root-id"
          >
            <div
              class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Order History
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="Timeline-root-id"
            >
              <div
                class="Timeline-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id Timeline-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="message"
                        placeholder="Leave your note here..."
                        rows="1"
                      />
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Payment was authorized
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Order refund information was sent to customer
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Order cancel information was sent to customer
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Note from external service
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineNote-root-id"
              >
                <div
                  class="TimelineNote-title-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
                <div
                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
                >
                  <div
                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      This is note
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineNote-root-id"
              >
                <div
                  class="TimelineNote-title-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
                <div
                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
                >
                  <div
                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      This is note
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiAccordionSummary-content-id"
                    >
                      <div
                        class="TimelineEventHeader-container-id"
                      >
                        <div
                          class="TimelineEventHeader-elementsContainer-id"
                        >
                          <div
                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id MuiTypography-body1-id"
                          >
                            Products were refunded by 
                          </div>
                          <a
                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                          >
                            Jane Doe
                          </a>
                        </div>
                        <div
                          class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                        >
                          <time
                            class=""
                            datetime="1537190544376"
                            title="Sep 17, 2018 9:22 AM"
                          >
                            in a month
                          </time>
                        </div>
                      </div>
                    </div>
                    <div
                      aria-disabled="false"
                      aria-hidden="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
                          />
                        </svg>
                      </span>
                    </div>
                  </div>
                  <div
                    class="MuiCollapse-container-id MuiCollapse-hidden-id"
                    style="min-height:0px"
                  >
                    <div
                      class="MuiCollapse-wrapper-id"
                    >
                      <div
                        class="MuiCollapse-wrapperInner-id"
                      >
                        <div
                          role="region"
                        >
                          <div
                            class="MuiAccordionDetails-root-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:12px"
                              >
                                Products refunded
                              </div>
                              <table>
                                <tbody>
                                  <tr>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      Milk
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        Cow's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        qty: 4
                                      </div>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      Milk
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        Goat's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        qty: 4
                                      </div>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                Shipment was refunded
                              </div>
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:12px"
                              >
                                Transaction reference
                              </div>
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                123
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Fulfilled 1 items
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1537190544376"
                      title="Sep 17, 2018 9:22 AM"
                    >
                      in a month
                    </time>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Customer
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
              >
                melissa.simon@example.com
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="OrderCustomer-sectionHeader-id"
              >
                <div
                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
                >
                  Shipping Address
                </div>
                <div
                  class="OrderCustomer-sectionHeaderToolbar-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                    data-test-id="edit-shipping-address"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiButton-label-id"
                    >
                      Edit
                    </span>
                  </button>
                </div>
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Melissa Simon
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                487 Roberto Shores
                <br />
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                66272 West Patriciastad
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Wyspy Salomona
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
              >
                Fulfill from All Warehouses
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="OrderCustomer-sectionHeader-id"
              >
                <div
                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
                >
                  Billing Address
                </div>
                <div
                  class="OrderCustomer-sectionHeaderToolbar-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                    data-test-id="edit-billing-address"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiButton-label-id"
                    >
                      Edit
                    </span>
                  </button>
                </div>
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Same as shipping address
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="order-sales-channel"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Sales channel
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Default Channel
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Invoices
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id OrderInvoiceList-cardContentTable-id"
            >
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id OrderInvoiceList-invoicesTable-id"
                >
                  <tbody
                    class="MuiTableBody-root-id OrderInvoiceList-invoicesTableBody-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-hover-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
                      >
                        Invoice 1
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          created Jun 22, 2020
                        </div>
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Send
                          </span>
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Notes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Lorem ipsum dolor sit amet
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            <div
              class="OrderDetailsTitle-container-id"
            >
              Order #9
              <div
                class="OrderDetailsTitle-statusContainer-id"
              >
                <div
                  class="MuiChip-root-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
              data-test-id="show-more-button"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    clip-rule="evenodd"
                    d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                    fill="currentColor"
                    fill-rule="evenodd"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="OrderDetailsPage-date-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body2-id"
        >
          <time
            class=""
            datetime="1536658648185"
            title="Sep 11, 2018 5:37 AM"
          >
            in a month
          </time>
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div
          data-test-id="order-fulfillment"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id OrderUnfulfilledItems-cardTitle-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-error-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Unfulfilled (3)
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <div
                  class="OrderUnfulfilledItems-toolbar-id"
                >
                  <div>
                    <span
                      class="Skeleton-skeleton-id"
                      data-test-id="skeleton"
                    >
                      ‌
                    </span>
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </div>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderUnfulfilledItems-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Watkins-Gonzalez (Soft)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      59-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      3
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      18.51
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      55.53
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Fulfill
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Fulfilled (1)
                    </div>
                    <div
                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
                    >
                      Fulfilled from Be stocked
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                  data-test-id="cancel-fulfillment-button"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <svg
                      fill="none"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clip-rule="evenodd"
                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
                        fill="#28234A"
                        fill-opacity="0.6"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </svg>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Williams, Garcia and Walker (XS)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      5-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      1
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add tracking
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Fulfilled (1)
                    </div>
                    <div
                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
                    >
                      Fulfilled from C our wares
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                  data-test-id="cancel-fulfillment-button"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <svg
                      fill="none"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clip-rule="evenodd"
                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
                        fill="#28234A"
                        fill-opacity="0.6"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </svg>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Williams, Garcia and Walker (XS)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      5-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      1
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                  </tr>
                </tbody>
                <tbody>
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id OrderFulfilledProductsCard-infoRow-id"
                      colspan="5"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Fulfilled from: 
                        <div
                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id OrderFulfilledProductsCard-infoLabelWithMargin-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          C our wares
                        </div>
                      </div>
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Tracking Number: 
                        <div
                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          01nn12399su12nndfsy
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Edit tracking
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderPayment-header-id"
                  >
                    <div
                      class="OrderPayment-titleContainer-id"
                    >
                      Payment status
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiChip-root-id Pill-root-id Pill-error-id"
                      >
                        <span
                          class="MuiChip-label-id Pill-label-id"
                        >
                          Unpaid
                        </span>
                      </div>
                    </div>
                    <div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Capture
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        data-test-id="refund-button"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Refund
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Refund
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Mark as paid
                        </span>
                      </button>
                    </div>
                  </div>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Subtotal
                    </td>
                    <td>
                      5 items
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      214.95
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Taxes
                    </td>
                    <td>
                      does not apply
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Shipping
                    </td>
                    <td>
                      Registred priority
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      19.98
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Total
                    </td>
                    <td />
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Preauthorized amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Captured amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Refunded amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Outstanding Balance
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.key"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          some-value
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="OrderHistory-root-id"
          >
            <div
              class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Order History
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="Timeline-root-id"
            >
              <div
                class="Timeline-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id Timeline-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="message"
                        placeholder="Leave your note here..."
                        rows="1"
                      />
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Payment was authorized
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Order refund information was sent to customer
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Order cancel information was sent to customer
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Note from external service
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineNote-root-id"
              >
                <div
                  class="TimelineNote-title-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
                <div
                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
                >
                  <div
                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      This is note
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineNote-root-id"
              >
                <div
                  class="TimelineNote-title-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
                <div
                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
                >
                  <div
                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      This is note
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiAccordionSummary-content-id"
                    >
                      <div
                        class="TimelineEventHeader-container-id"
                      >
                        <div
                          class="TimelineEventHeader-elementsContainer-id"
                        >
                          <div
                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id MuiTypography-body1-id"
                          >
                            Products were refunded by 
                          </div>
                          <a
                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                          >
                            Jane Doe
                          </a>
                        </div>
                        <div
                          class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                        >
                          <time
                            class=""
                            datetime="1537190544376"
                            title="Sep 17, 2018 9:22 AM"
                          >
                            in a month
                          </time>
                        </div>
                      </div>
                    </div>
                    <div
                      aria-disabled="false"
                      aria-hidden="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
                          />
                        </svg>
                      </span>
                    </div>
                  </div>
                  <div
                    class="MuiCollapse-container-id MuiCollapse-hidden-id"
                    style="min-height:0px"
                  >
                    <div
                      class="MuiCollapse-wrapper-id"
                    >
                      <div
                        class="MuiCollapse-wrapperInner-id"
                      >
                        <div
                          role="region"
                        >
                          <div
                            class="MuiAccordionDetails-root-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:12px"
                              >
                                Products refunded
                              </div>
                              <table>
                                <tbody>
                                  <tr>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      Milk
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        Cow's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        qty: 4
                                      </div>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      Milk
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        Goat's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        qty: 4
                                      </div>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                Shipment was refunded
                              </div>
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:12px"
                              >
                                Transaction reference
                              </div>
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                123
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Fulfilled 1 items
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1537190544376"
                      title="Sep 17, 2018 9:22 AM"
                    >
                      in a month
                    </time>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Customer
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
              >
                melissa.simon@example.com
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="OrderCustomer-sectionHeader-id"
              >
                <div
                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
                >
                  Shipping Address
                </div>
                <div
                  class="OrderCustomer-sectionHeaderToolbar-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                    data-test-id="edit-shipping-address"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiButton-label-id"
                    >
                      Edit
                    </span>
                  </button>
                </div>
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Melissa Simon
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                487 Roberto Shores
                <br />
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                66272 West Patriciastad
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Wyspy Salomona
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
              >
                Fulfill from All Warehouses
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="OrderCustomer-sectionHeader-id"
              >
                <div
                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
                >
                  Billing Address
                </div>
                <div
                  class="OrderCustomer-sectionHeaderToolbar-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                    data-test-id="edit-billing-address"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiButton-label-id"
                    >
                      Edit
                    </span>
                  </button>
                </div>
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Same as shipping address
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="order-sales-channel"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Sales channel
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Default Channel
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Invoices
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id OrderInvoiceList-cardContentTable-id"
            >
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id OrderInvoiceList-invoicesTable-id"
                >
                  <tbody
                    class="MuiTableBody-root-id OrderInvoiceList-invoicesTableBody-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-hover-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
                      >
                        Invoice 1
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          created Jun 22, 2020
                        </div>
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Send
                          </span>
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Notes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Lorem ipsum dolor sit amet
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            <div
              class="OrderDetailsTitle-container-id"
            >
              Order #9
              <div
                class="OrderDetailsTitle-statusContainer-id"
              >
                <div
                  class="MuiChip-root-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
              data-test-id="show-more-button"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    clip-rule="evenodd"
                    d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                    fill="currentColor"
                    fill-rule="evenodd"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="OrderDetailsPage-date-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body2-id"
        >
          <time
            class=""
            datetime="1536658648185"
            title="Sep 11, 2018 5:37 AM"
          >
            in a month
          </time>
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div
          data-test-id="order-fulfillment"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id OrderUnfulfilledItems-cardTitle-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-error-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Unfulfilled (3)
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <div
                  class="OrderUnfulfilledItems-toolbar-id"
                >
                  <div>
                    <span
                      class="Skeleton-skeleton-id"
                      data-test-id="skeleton"
                    >
                      ‌
                    </span>
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </div>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderUnfulfilledItems-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Watkins-Gonzalez (Soft)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      59-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      3
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      18.51
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      55.53
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Fulfill
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Fulfilled (1)
                    </div>
                    <div
                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
                    >
                      Fulfilled from Be stocked
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                  data-test-id="cancel-fulfillment-button"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <svg
                      fill="none"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clip-rule="evenodd"
                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
                        fill="#28234A"
                        fill-opacity="0.6"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </svg>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Williams, Garcia and Walker (XS)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      5-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      1
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add tracking
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Fulfilled (1)
                    </div>
                    <div
                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
                    >
                      Fulfilled from C our wares
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                  data-test-id="cancel-fulfillment-button"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <svg
                      fill="none"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clip-rule="evenodd"
                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
                        fill="#28234A"
                        fill-opacity="0.6"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </svg>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Williams, Garcia and Walker (XS)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      5-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      1
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                  </tr>
                </tbody>
                <tbody>
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id OrderFulfilledProductsCard-infoRow-id"
                      colspan="5"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Fulfilled from: 
                        <div
                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id OrderFulfilledProductsCard-infoLabelWithMargin-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          C our wares
                        </div>
                      </div>
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Tracking Number: 
                        <div
                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          01nn12399su12nndfsy
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Edit tracking
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderPayment-header-id"
                  >
                    <div
                      class="OrderPayment-titleContainer-id"
                    >
                      Payment status
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiChip-root-id Pill-root-id Pill-info-id"
                      >
                        <span
                          class="MuiChip-label-id Pill-label-id"
                        >
                          Fully refunded
                        </span>
                      </div>
                    </div>
                    <div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Capture
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        data-test-id="refund-button"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Refund
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Refund
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Mark as paid
                        </span>
                      </button>
                    </div>
                  </div>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Subtotal
                    </td>
                    <td>
                      5 items
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      214.95
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Taxes
                    </td>
                    <td>
                      does not apply
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Shipping
                    </td>
                    <td>
                      Registred priority
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      19.98
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Total
                    </td>
                    <td />
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Preauthorized amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Captured amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Refunded amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Outstanding Balance
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.key"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          some-value
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="OrderHistory-root-id"
          >
            <div
              class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Order History
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="Timeline-root-id"
            >
              <div
                class="Timeline-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id Timeline-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="message"
                        placeholder="Leave your note here..."
                        rows="1"
                      />
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Payment was authorized
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Order refund information was sent to customer
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Order cancel information was sent to customer
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Note from external service
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineNote-root-id"
              >
                <div
                  class="TimelineNote-title-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
                <div
                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
                >
                  <div
                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      This is note
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineNote-root-id"
              >
                <div
                  class="TimelineNote-title-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
                <div
                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
                >
                  <div
                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      This is note
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiAccordionSummary-content-id"
                    >
                      <div
                        class="TimelineEventHeader-container-id"
                      >
                        <div
                          class="TimelineEventHeader-elementsContainer-id"
                        >
                          <div
                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id MuiTypography-body1-id"
                          >
                            Products were refunded by 
                          </div>
                          <a
                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                          >
                            Jane Doe
                          </a>
                        </div>
                        <div
                          class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                        >
                          <time
                            class=""
                            datetime="1537190544376"
                            title="Sep 17, 2018 9:22 AM"
                          >
                            in a month
                          </time>
                        </div>
                      </div>
                    </div>
                    <div
                      aria-disabled="false"
                      aria-hidden="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
                          />
                        </svg>
                      </span>
                    </div>
                  </div>
                  <div
                    class="MuiCollapse-container-id MuiCollapse-hidden-id"
                    style="min-height:0px"
                  >
                    <div
                      class="MuiCollapse-wrapper-id"
                    >
                      <div
                        class="MuiCollapse-wrapperInner-id"
                      >
                        <div
                          role="region"
                        >
                          <div
                            class="MuiAccordionDetails-root-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:12px"
                              >
                                Products refunded
                              </div>
                              <table>
                                <tbody>
                                  <tr>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      Milk
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        Cow's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        qty: 4
                                      </div>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      Milk
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        Goat's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        qty: 4
                                      </div>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                Shipment was refunded
                              </div>
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:12px"
                              >
                                Transaction reference
                              </div>
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                123
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Fulfilled 1 items
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1537190544376"
                      title="Sep 17, 2018 9:22 AM"
                    >
                      in a month
                    </time>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Customer
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
              >
                melissa.simon@example.com
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="OrderCustomer-sectionHeader-id"
              >
                <div
                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
                >
                  Shipping Address
                </div>
                <div
                  class="OrderCustomer-sectionHeaderToolbar-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                    data-test-id="edit-shipping-address"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiButton-label-id"
                    >
                      Edit
                    </span>
                  </button>
                </div>
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Melissa Simon
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                487 Roberto Shores
                <br />
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                66272 West Patriciastad
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Wyspy Salomona
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
              >
                Fulfill from All Warehouses
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="OrderCustomer-sectionHeader-id"
              >
                <div
                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
                >
                  Billing Address
                </div>
                <div
                  class="OrderCustomer-sectionHeaderToolbar-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                    data-test-id="edit-billing-address"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiButton-label-id"
                    >
                      Edit
                    </span>
                  </button>
                </div>
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Same as shipping address
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="order-sales-channel"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Sales channel
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Default Channel
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Invoices
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id OrderInvoiceList-cardContentTable-id"
            >
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id OrderInvoiceList-invoicesTable-id"
                >
                  <tbody
                    class="MuiTableBody-root-id OrderInvoiceList-invoicesTableBody-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-hover-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
                      >
                        Invoice 1
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          created Jun 22, 2020
                        </div>
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Send
                          </span>
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Notes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Lorem ipsum dolor sit amet
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            <div
              class="OrderDetailsTitle-container-id"
            >
              Order #9
              <div
                class="OrderDetailsTitle-statusContainer-id"
              >
                <div
                  class="MuiChip-root-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
              data-test-id="show-more-button"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    clip-rule="evenodd"
                    d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                    fill="currentColor"
                    fill-rule="evenodd"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="OrderDetailsPage-date-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body2-id"
        >
          <time
            class=""
            datetime="1536658648185"
            title="Sep 11, 2018 5:37 AM"
          >
            in a month
          </time>
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div
          data-test-id="order-fulfillment"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id OrderUnfulfilledItems-cardTitle-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-error-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Unfulfilled (3)
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <div
                  class="OrderUnfulfilledItems-toolbar-id"
                >
                  <div>
                    <span
                      class="Skeleton-skeleton-id"
                      data-test-id="skeleton"
                    >
                      ‌
                    </span>
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </div>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderUnfulfilledItems-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Watkins-Gonzalez (Soft)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      59-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      3
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      18.51
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      55.53
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Fulfill
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Fulfilled (1)
                    </div>
                    <div
                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
                    >
                      Fulfilled from Be stocked
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                  data-test-id="cancel-fulfillment-button"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <svg
                      fill="none"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clip-rule="evenodd"
                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
                        fill="#28234A"
                        fill-opacity="0.6"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </svg>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Williams, Garcia and Walker (XS)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      5-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      1
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add tracking
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Fulfilled (1)
                    </div>
                    <div
                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
                    >
                      Fulfilled from C our wares
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                  data-test-id="cancel-fulfillment-button"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <svg
                      fill="none"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clip-rule="evenodd"
                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
                        fill="#28234A"
                        fill-opacity="0.6"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </svg>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Williams, Garcia and Walker (XS)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      5-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      1
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                  </tr>
                </tbody>
                <tbody>
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id OrderFulfilledProductsCard-infoRow-id"
                      colspan="5"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Fulfilled from: 
                        <div
                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id OrderFulfilledProductsCard-infoLabelWithMargin-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          C our wares
                        </div>
                      </div>
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Tracking Number: 
                        <div
                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          01nn12399su12nndfsy
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Edit tracking
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderPayment-header-id"
                  >
                    <div
                      class="OrderPayment-titleContainer-id"
                    >
                      Payment status
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiChip-root-id Pill-root-id Pill-error-id"
                      >
                        <span
                          class="MuiChip-label-id Pill-label-id"
                        >
                          Unpaid
                        </span>
                      </div>
                    </div>
                    <div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Capture
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        data-test-id="refund-button"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Refund
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Refund
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Mark as paid
                        </span>
                      </button>
                    </div>
                  </div>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Subtotal
                    </td>
                    <td>
                      5 items
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      214.95
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Taxes
                    </td>
                    <td>
                      does not apply
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Shipping
                    </td>
                    <td>
                      Registred priority
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      19.98
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Total
                    </td>
                    <td />
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Preauthorized amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Captured amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Refunded amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Outstanding Balance
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.key"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          some-value
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="OrderHistory-root-id"
          >
            <div
              class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Order History
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="Timeline-root-id"
            >
              <div
                class="Timeline-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id Timeline-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="message"
                        placeholder="Leave your note here..."
                        rows="1"
                      />
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Payment was authorized
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Order refund information was sent to customer
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Order cancel information was sent to customer
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Note from external service
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineNote-root-id"
              >
                <div
                  class="TimelineNote-title-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
                <div
                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
                >
                  <div
                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      This is note
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineNote-root-id"
              >
                <div
                  class="TimelineNote-title-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
                <div
                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
                >
                  <div
                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      This is note
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiAccordionSummary-content-id"
                    >
                      <div
                        class="TimelineEventHeader-container-id"
                      >
                        <div
                          class="TimelineEventHeader-elementsContainer-id"
                        >
                          <div
                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id MuiTypography-body1-id"
                          >
                            Products were refunded by 
                          </div>
                          <a
                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                          >
                            Jane Doe
                          </a>
                        </div>
                        <div
                          class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                        >
                          <time
                            class=""
                            datetime="1537190544376"
                            title="Sep 17, 2018 9:22 AM"
                          >
                            in a month
                          </time>
                        </div>
                      </div>
                    </div>
                    <div
                      aria-disabled="false"
                      aria-hidden="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
                          />
                        </svg>
                      </span>
                    </div>
                  </div>
                  <div
                    class="MuiCollapse-container-id MuiCollapse-hidden-id"
                    style="min-height:0px"
                  >
                    <div
                      class="MuiCollapse-wrapper-id"
                    >
                      <div
                        class="MuiCollapse-wrapperInner-id"
                      >
                        <div
                          role="region"
                        >
                          <div
                            class="MuiAccordionDetails-root-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:12px"
                              >
                                Products refunded
                              </div>
                              <table>
                                <tbody>
                                  <tr>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      Milk
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        Cow's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        qty: 4
                                      </div>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      Milk
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        Goat's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        qty: 4
                                      </div>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                Shipment was refunded
                              </div>
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:12px"
                              >
                                Transaction reference
                              </div>
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                123
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Fulfilled 1 items
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1537190544376"
                      title="Sep 17, 2018 9:22 AM"
                    >
                      in a month
                    </time>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Customer
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
              >
                melissa.simon@example.com
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="OrderCustomer-sectionHeader-id"
              >
                <div
                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
                >
                  Shipping Address
                </div>
                <div
                  class="OrderCustomer-sectionHeaderToolbar-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                    data-test-id="edit-shipping-address"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiButton-label-id"
                    >
                      Edit
                    </span>
                  </button>
                </div>
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Melissa Simon
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                487 Roberto Shores
                <br />
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                66272 West Patriciastad
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Wyspy Salomona
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
              >
                Fulfill from All Warehouses
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="OrderCustomer-sectionHeader-id"
              >
                <div
                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
                >
                  Billing Address
                </div>
                <div
                  class="OrderCustomer-sectionHeaderToolbar-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                    data-test-id="edit-billing-address"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiButton-label-id"
                    >
                      Edit
                    </span>
                  </button>
                </div>
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Same as shipping address
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="order-sales-channel"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Sales channel
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Default Channel
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Invoices
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id OrderInvoiceList-cardContentTable-id"
            >
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id OrderInvoiceList-invoicesTable-id"
                >
                  <tbody
                    class="MuiTableBody-root-id OrderInvoiceList-invoicesTableBody-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-hover-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
                      >
                        Invoice 1
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          created Jun 22, 2020
                        </div>
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Send
                          </span>
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Notes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Lorem ipsum dolor sit amet
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            <div
              class="OrderDetailsTitle-container-id"
            >
              Order #9
              <div
                class="OrderDetailsTitle-statusContainer-id"
              >
                <div
                  class="MuiChip-root-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unfulfilled
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
              data-test-id="show-more-button"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    clip-rule="evenodd"
                    d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                    fill="currentColor"
                    fill-rule="evenodd"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="OrderDetailsPage-date-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body2-id"
        >
          <time
            class=""
            datetime="1536658648185"
            title="Sep 11, 2018 5:37 AM"
          >
            in a month
          </time>
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div
          data-test-id="order-fulfillment"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id OrderUnfulfilledItems-cardTitle-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-error-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Unfulfilled (3)
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <div
                  class="OrderUnfulfilledItems-toolbar-id"
                >
                  <div>
                    <span
                      class="Skeleton-skeleton-id"
                      data-test-id="skeleton"
                    >
                      ‌
                    </span>
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </div>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderUnfulfilledItems-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Watkins-Gonzalez (Soft)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      59-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      3
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      18.51
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      55.53
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Fulfill
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Fulfilled (1)
                    </div>
                    <div
                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
                    >
                      Fulfilled from Be stocked
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                  data-test-id="cancel-fulfillment-button"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <svg
                      fill="none"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clip-rule="evenodd"
                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
                        fill="#28234A"
                        fill-opacity="0.6"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </svg>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Williams, Garcia and Walker (XS)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      5-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      1
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add tracking
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderCardTitle-title-id"
                  >
                    <div
                      class="OrderCardTitle-indicator-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="9"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
                    >
                      Fulfilled (1)
                    </div>
                    <div
                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
                    >
                      Fulfilled from C our wares
                    </div>
                  </div>
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
                  data-test-id="cancel-fulfillment-button"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <svg
                      fill="none"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clip-rule="evenodd"
                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
                        fill="#28234A"
                        fill-opacity="0.6"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </svg>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfilledProductsCard-table-id"
              >
                <colgroup>
                  <col
                    class="TableHeader-colName-id"
                  />
                  <col
                    class="TableHeader-colSku-id"
                  />
                  <col
                    class="TableHeader-colQuantity-id"
                  />
                  <col
                    class="TableHeader-colPrice-id"
                  />
                  <col
                    class="TableHeader-colTotal-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
                      scope="col"
                    >
                      Product
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
                      scope="col"
                    >
                      Quantity
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          Williams, Garcia and Walker (XS)
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
                    >
                      5-1337
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
                    >
                      1
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      79.71
                    </td>
                  </tr>
                </tbody>
                <tbody>
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id OrderFulfilledProductsCard-infoRow-id"
                      colspan="5"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Fulfilled from: 
                        <div
                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id OrderFulfilledProductsCard-infoLabelWithMargin-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          C our wares
                        </div>
                      </div>
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Tracking Number: 
                        <div
                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          01nn12399su12nndfsy
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Edit tracking
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  <div
                    class="OrderPayment-header-id"
                  >
                    <div
                      class="OrderPayment-titleContainer-id"
                    >
                      Payment status
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiChip-root-id Pill-root-id Pill-error-id"
                      >
                        <span
                          class="MuiChip-label-id Pill-label-id"
                        >
                          Unpaid
                        </span>
                      </div>
                    </div>
                    <div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Capture
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        data-test-id="refund-button"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Refund
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Refund
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Mark as paid
                        </span>
                      </button>
                    </div>
                  </div>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Subtotal
                    </td>
                    <td>
                      5 items
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      214.95
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Taxes
                    </td>
                    <td>
                      does not apply
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Shipping
                    </td>
                    <td>
                      Registred priority
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      19.98
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Total
                    </td>
                    <td />
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Preauthorized amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Captured amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Refunded amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Outstanding Balance
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      234.93
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.key"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          some-value
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="OrderHistory-root-id"
          >
            <div
              class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Order History
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="Timeline-root-id"
            >
              <div
                class="Timeline-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id Timeline-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="message"
                        placeholder="Leave your note here..."
                        rows="1"
                      />
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Payment was authorized
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Order refund information was sent to customer
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Order cancel information was sent to customer
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Note from external service
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
              </div>
              <div
                class="TimelineNote-root-id"
              >
                <div
                  class="TimelineNote-title-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
                <div
                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
                >
                  <div
                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      This is note
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineNote-root-id"
              >
                <div
                  class="TimelineNote-title-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1568726544376"
                      title="Sep 17, 2019 9:22 AM"
                    >
                      in a year
                    </time>
                  </div>
                </div>
                <div
                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
                >
                  <div
                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      This is note
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiAccordionSummary-content-id"
                    >
                      <div
                        class="TimelineEventHeader-container-id"
                      >
                        <div
                          class="TimelineEventHeader-elementsContainer-id"
                        >
                          <div
                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id MuiTypography-body1-id"
                          >
                            Products were refunded by 
                          </div>
                          <a
                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                          >
                            Jane Doe
                          </a>
                        </div>
                        <div
                          class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                        >
                          <time
                            class=""
                            datetime="1537190544376"
                            title="Sep 17, 2018 9:22 AM"
                          >
                            in a month
                          </time>
                        </div>
                      </div>
                    </div>
                    <div
                      aria-disabled="false"
                      aria-hidden="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
                          />
                        </svg>
                      </span>
                    </div>
                  </div>
                  <div
                    class="MuiCollapse-container-id MuiCollapse-hidden-id"
                    style="min-height:0px"
                  >
                    <div
                      class="MuiCollapse-wrapper-id"
                    >
                      <div
                        class="MuiCollapse-wrapperInner-id"
                      >
                        <div
                          role="region"
                        >
                          <div
                            class="MuiAccordionDetails-root-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:12px"
                              >
                                Products refunded
                              </div>
                              <table>
                                <tbody>
                                  <tr>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      Milk
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        Cow's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        qty: 4
                                      </div>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      Milk
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        Goat's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:12px"
                                      >
                                        qty: 4
                                      </div>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                Shipment was refunded
                              </div>
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:12px"
                              >
                                Transaction reference
                              </div>
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                123
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="TimelineEvent-root-id"
              >
                <span
                  class="TimelineEvent-dot-id"
                />
                <div
                  class="TimelineEventHeader-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Fulfilled 1 items
                  </div>
                  <div
                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
                  >
                    <time
                      class=""
                      datetime="1537190544376"
                      title="Sep 17, 2018 9:22 AM"
                    >
                      in a month
                    </time>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Customer
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
              >
                melissa.simon@example.com
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="OrderCustomer-sectionHeader-id"
              >
                <div
                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
                >
                  Shipping Address
                </div>
                <div
                  class="OrderCustomer-sectionHeaderToolbar-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                    data-test-id="edit-shipping-address"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiButton-label-id"
                    >
                      Edit
                    </span>
                  </button>
                </div>
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Melissa Simon
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                487 Roberto Shores
                <br />
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                66272 West Patriciastad
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Wyspy Salomona
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
              >
                Fulfill from All Warehouses
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="OrderCustomer-sectionHeader-id"
              >
                <div
                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
                >
                  Billing Address
                </div>
                <div
                  class="OrderCustomer-sectionHeaderToolbar-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                    data-test-id="edit-billing-address"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiButton-label-id"
                    >
                      Edit
                    </span>
                  </button>
                </div>
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Same as shipping address
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="order-sales-channel"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Sales channel
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Default Channel
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Invoices
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id OrderInvoiceList-cardContentTable-id"
            >
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id OrderInvoiceList-invoicesTable-id"
                >
                  <tbody
                    class="MuiTableBody-root-id OrderInvoiceList-invoicesTableBody-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-hover-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
                      >
                        Invoice 1
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          created Jun 22, 2020
                        </div>
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Send
                          </span>
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Notes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Lorem ipsum dolor sit amet
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Orders / Order draft default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id OrderDraftPage-header-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          #24
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
              color="primary"
              data-test-id="show-more-button"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <path
                  clip-rule="evenodd"
                  d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                  fill="currentColor"
                  fill-rule="evenodd"
                />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      class="OrderDraftPage-date-id"
    >
      <div
        class="MuiTypography-root-id MuiTypography-body2-id"
      >
        <time
          class=""
          datetime="1537485819811"
          title="Sep 20, 2018 7:23 PM"
        >
          in a month
        </time>
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Order Details
              </span>
            </div>
            <div
              class="MuiCardHeader-action-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                data-test-id="add-products-button"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add products
                </span>
              </button>
            </div>
          </div>
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderDraftDetailsProducts-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colName-id"
                    scope="col"
                  >
                    <span
                      class="OrderDraftDetailsProducts-colNameLabel-id"
                    >
                      Product
                    </span>
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colQuantity-id"
                    scope="col"
                  >
                    Quantity
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colPrice-id"
                    scope="col"
                  >
                    Price
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colTotal-id"
                    scope="col"
                  >
                    Total
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colAction-id"
                    scope="col"
                  />
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderDraftDetailsProducts-colName-id"
                    data-test-id="table-cell-avatar"
                    thumbnail="placeholder60x60.png"
                  >
                    <div
                      class="Avatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder60x60.png"
                        />
                      </div>
                      <div
                        class="Avatar-children-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body2-id"
                        >
                          Davis Group (Hard)
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          58-1338
                        </div>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colQuantity-id"
                  >
                    <form>
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id TableLineForm-quantityField-id MuiFormControl-fullWidth-id"
                      >
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            min="1"
                            name="quantity"
                            type="number"
                            value="2"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="PrivateNotchedOutline-legend-id"
                              style="width:0.01px"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </form>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colPrice-id"
                  >
                    <a
                      class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      168.30
                    </a>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colTotal-id"
                  >
                    <span
                      class="Money-currency-id"
                    >
                      USD
                    </span>
                    336.60
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderDraftDetailsProducts-colName-id"
                    data-test-id="table-cell-avatar"
                    thumbnail="placeholder60x60.png"
                  >
                    <div
                      class="Avatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder60x60.png"
                        />
                      </div>
                      <div
                        class="Avatar-children-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body2-id"
                        >
                          Anderson PLC (15-1337)
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          15-1337
                        </div>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colQuantity-id"
                  >
                    <form>
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id TableLineForm-quantityField-id MuiFormControl-fullWidth-id"
                      >
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            min="1"
                            name="quantity"
                            type="number"
                            value="2"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="PrivateNotchedOutline-legend-id"
                              style="width:0.01px"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </form>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colPrice-id"
                  >
                    <a
                      class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      168.30
                    </a>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colTotal-id"
                  >
                    <span
                      class="Money-currency-id"
                    >
                      USD
                    </span>
                    336.60
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <table
              class="OrderDraftDetailsSummary-root-id"
            >
              <tbody>
                <tr
                  class="OrderDraftDetailsSummary-relativeRow-id"
                >
                  <td>
                    <a
                      class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                    >
                      Add Discount
                    </a>
                  </td>
                  <td
                    class="OrderDraftDetailsSummary-textRight-id"
                  >
                    ---
                  </td>
                </tr>
                <tr>
                  <td>
                    Subtotal
                  </td>
                  <td
                    class="OrderDraftDetailsSummary-textRight-id"
                  >
                    <span
                      class="Money-currency-id"
                    >
                      USD
                    </span>
                    168.30
                  </td>
                </tr>
                <tr>
                  <td>
                    No applicable shipping carriers
                  </td>
                  <td
                    class="OrderDraftDetailsSummary-textRight-id"
                  >
                    ---
                  </td>
                </tr>
                <tr>
                  <td>
                    Taxes (VAT included)
                  </td>
                  <td
                    class="OrderDraftDetailsSummary-textRight-id"
                  >
                    <span
                      class="Money-currency-id"
                    >
                      USD
                    </span>
                    68.30
                  </td>
                </tr>
                <tr>
                  <td>
                    Total
                  </td>
                  <td
                    class="OrderDraftDetailsSummary-textRight-id"
                  >
                    <span
                      class="Money-currency-id"
                    >
                      USD
                    </span>
                    168.30
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <div
            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            Order History
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="Timeline-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id Timeline-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="message"
                        placeholder="Leave your note here..."
                        rows="1"
                      />
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Customer
              </span>
            </div>
            <div
              class="MuiCardHeader-action-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                data-test-id="edit-customer"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Edit
                </span>
              </button>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Anonymous user
            </div>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Shipping Address
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Not set
            </div>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Billing Address
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Not set
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Sales channel
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
            data-test-id="sales-channel"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Default Channel
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Order draft loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id OrderDraftPage-header-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          <span
            class="Skeleton-skeleton-id"
            data-test-id="skeleton"
            style="width:10em"
          >
            ‌
          </span>
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
              color="primary"
              data-test-id="show-more-button"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <path
                  clip-rule="evenodd"
                  d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                  fill="currentColor"
                  fill-rule="evenodd"
                />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      class="OrderDraftPage-date-id"
    >
      <span
        class="Skeleton-skeleton-id"
        data-test-id="skeleton"
        style="width:10em"
      >
        ‌
      </span>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Order Details
              </span>
            </div>
          </div>
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderDraftDetailsProducts-table-id"
            >
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                    colspan="5"
                  >
                    No Products added to Order
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div
            class="MuiCardContent-root-id"
          />
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <div
            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            Order History
          </div>
          <hr
            class="Hr-root-id"
          />
          <span
            class="Skeleton-skeleton-id"
            data-test-id="skeleton"
          >
            ‌
          </span>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Customer
              </span>
            </div>
            <div
              class="MuiCardHeader-action-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                data-test-id="edit-customer"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Edit
                </span>
              </button>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
            >
              ‌
            </span>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Shipping Address
              </div>
            </div>
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
            >
              ‌
            </span>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Billing Address
              </div>
            </div>
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
            >
              ‌
            </span>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Sales channel
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
            data-test-id="sales-channel"
          >
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
            >
              ‌
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id OrderDraftPage-header-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          #24
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
              color="primary"
              data-test-id="show-more-button"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <path
                  clip-rule="evenodd"
                  d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                  fill="currentColor"
                  fill-rule="evenodd"
                />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      class="OrderDraftPage-date-id"
    >
      <div
        class="MuiTypography-root-id MuiTypography-body2-id"
      >
        <time
          class=""
          datetime="1537485819811"
          title="Sep 20, 2018 7:23 PM"
        >
          in a month
        </time>
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Order Details
              </span>
            </div>
            <div
              class="MuiCardHeader-action-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                data-test-id="add-products-button"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add products
                </span>
              </button>
            </div>
          </div>
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderDraftDetailsProducts-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colName-id"
                    scope="col"
                  >
                    <span
                      class="OrderDraftDetailsProducts-colNameLabel-id"
                    >
                      Product
                    </span>
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colQuantity-id"
                    scope="col"
                  >
                    Quantity
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colPrice-id"
                    scope="col"
                  >
                    Price
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colTotal-id"
                    scope="col"
                  >
                    Total
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colAction-id"
                    scope="col"
                  />
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderDraftDetailsProducts-colName-id"
                    data-test-id="table-cell-avatar"
                    thumbnail="placeholder60x60.png"
                  >
                    <div
                      class="Avatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder60x60.png"
                        />
                      </div>
                      <div
                        class="Avatar-children-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body2-id"
                        >
                          Davis Group (Hard)
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          58-1338
                        </div>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colQuantity-id"
                  >
                    <form>
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id TableLineForm-quantityField-id MuiFormControl-fullWidth-id"
                      >
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            min="1"
                            name="quantity"
                            type="number"
                            value="2"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="PrivateNotchedOutline-legend-id"
                              style="width:0.01px"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </form>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colPrice-id"
                  >
                    <a
                      class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      168.30
                    </a>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colTotal-id"
                  >
                    <span
                      class="Money-currency-id"
                    >
                      USD
                    </span>
                    336.60
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderDraftDetailsProducts-colName-id"
                    data-test-id="table-cell-avatar"
                    thumbnail="placeholder60x60.png"
                  >
                    <div
                      class="Avatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder60x60.png"
                        />
                      </div>
                      <div
                        class="Avatar-children-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body2-id"
                        >
                          Anderson PLC (15-1337)
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          15-1337
                        </div>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colQuantity-id"
                  >
                    <form>
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id TableLineForm-quantityField-id MuiFormControl-fullWidth-id"
                      >
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            min="1"
                            name="quantity"
                            type="number"
                            value="2"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="PrivateNotchedOutline-legend-id"
                              style="width:0.01px"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </form>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colPrice-id"
                  >
                    <a
                      class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                    >
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      168.30
                    </a>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colTotal-id"
                  >
                    <span
                      class="Money-currency-id"
                    >
                      USD
                    </span>
                    336.60
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <table
              class="OrderDraftDetailsSummary-root-id"
            >
              <tbody>
                <tr
                  class="OrderDraftDetailsSummary-relativeRow-id"
                >
                  <td>
                    <a
                      class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                    >
                      Add Discount
                    </a>
                  </td>
                  <td
                    class="OrderDraftDetailsSummary-textRight-id"
                  >
                    ---
                  </td>
                </tr>
                <tr>
                  <td>
                    Subtotal
                  </td>
                  <td
                    class="OrderDraftDetailsSummary-textRight-id"
                  >
                    <span
                      class="Money-currency-id"
                    >
                      USD
                    </span>
                    168.30
                  </td>
                </tr>
                <tr>
                  <td>
                    No applicable shipping carriers
                  </td>
                  <td
                    class="OrderDraftDetailsSummary-textRight-id"
                  >
                    ---
                  </td>
                </tr>
                <tr>
                  <td>
                    Taxes (VAT included)
                  </td>
                  <td
                    class="OrderDraftDetailsSummary-textRight-id"
                  >
                    <span
                      class="Money-currency-id"
                    >
                      USD
                    </span>
                    68.30
                  </td>
                </tr>
                <tr>
                  <td>
                    Total
                  </td>
                  <td
                    class="OrderDraftDetailsSummary-textRight-id"
                  >
                    <span
                      class="Money-currency-id"
                    >
                      USD
                    </span>
                    168.30
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <div
            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            Order History
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="Timeline-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id Timeline-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="message"
                        placeholder="Leave your note here..."
                        rows="1"
                      />
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Customer
              </span>
            </div>
            <div
              class="MuiCardHeader-action-id"
            />
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Anonymous user
            </div>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Shipping Address
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Not set
            </div>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Billing Address
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Not set
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Sales channel
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
            data-test-id="sales-channel"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Default Channel
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Order draft without lines 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id OrderDraftPage-header-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          #24
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
              color="primary"
              data-test-id="show-more-button"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <path
                  clip-rule="evenodd"
                  d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                  fill="currentColor"
                  fill-rule="evenodd"
                />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      class="OrderDraftPage-date-id"
    >
      <div
        class="MuiTypography-root-id MuiTypography-body2-id"
      >
        <time
          class=""
          datetime="1537485819811"
          title="Sep 20, 2018 7:23 PM"
        >
          in a month
        </time>
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Order Details
              </span>
            </div>
            <div
              class="MuiCardHeader-action-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                data-test-id="add-products-button"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add products
                </span>
              </button>
            </div>
          </div>
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderDraftDetailsProducts-table-id"
            >
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                    colspan="5"
                  >
                    No Products added to Order
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <div
            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            Order History
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="Timeline-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id Timeline-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="message"
                        placeholder="Leave your note here..."
                        rows="1"
                      />
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Customer
              </span>
            </div>
            <div
              class="MuiCardHeader-action-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                data-test-id="edit-customer"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Edit
                </span>
              </button>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Anonymous user
            </div>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Shipping Address
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Not set
            </div>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Billing Address
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Not set
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Sales channel
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
            data-test-id="sales-channel"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Default Channel
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Order list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Orders
        </div>
        <div
          class="OrderListPage-settings-id"
        >
          <button
            aria-haspopup="true"
            aria-label="More"
            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
            color="primary"
            data-test-id="show-more-button"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                clip-rule="evenodd"
                d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
          </button>
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            230/500 orders
          </div>
          <div
            aria-label="button with select"
            class="MuiButtonGroup-root-id"
            data-test-id="create-order-button"
            role="group"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButton-containedPrimary-id"
              style="width:100%"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Create order
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Orders
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Orders..."
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MjA%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTk%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTg%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTc%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTY%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTU%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTQ%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTM%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTI%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTE%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTA%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6OQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6OA%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6Nw%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6Ng%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6NQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6NA%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6Mw%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6Mg%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MQ%3D%3D"
        />
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colNumber-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Order
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colDate-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Date
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colCustomer-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Customer
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colPayment-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Payment
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colFulfillment-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Fulfillment status
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colTotal-id TableCellHeader-notSortable-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Total
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="6"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #20
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658650376"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Laura Stone 1 2
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Fully paid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Cancelled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                305.17
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #19
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658650124"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Elizabeth Vaughn
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Fully paid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Cancelled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                1,215.89
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #18
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658650019"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                david.lawson@example.com
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-info-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Draft
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                321.71
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #17
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658649864"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Aaron Randall
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Cancelled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                271.95
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #16
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658649610"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Laura Jensen
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Cancelled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                335.84
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #15
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658649336"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Jenna Villa
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Cancelled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                1,042.15
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #14
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658649103"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Wesley Davis
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Cancelled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                213.69
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #13
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648921"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Anthony Gonzalez
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Cancelled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                367.03
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #12
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648750"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Denise Freeman
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Cancelled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                298.76
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #11
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648598"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                James Ball
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Fully paid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unfulfilled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                663.69
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #10
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648409"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Michael Martinez
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Cancelled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                280.41
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #9
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648185"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Melissa Simon
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                234.93
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #8
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647953"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Justin Mccoy
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                485.19
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #7
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647828"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Anthony Gonzalez
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Fully paid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                223.54
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #6
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647636"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Bradley Ford
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Fulfilled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                237.55
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #5
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647420"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                David Lawson
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                453.55
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #4
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647230"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Lauren Watson
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                812.67
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #3
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658646972"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Mark Lee
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                481.41
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #2
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658646751"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Kara Murphy
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Fully paid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                569.19
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #1
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658646314"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Curtis Bailey
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Fully paid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                557.00
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Orders
        </div>
        <div
          class="OrderListPage-settings-id"
        >
          <button
            aria-haspopup="true"
            aria-label="More"
            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
            color="primary"
            data-test-id="show-more-button"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                clip-rule="evenodd"
                d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
          </button>
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            500/500 orders
          </div>
          <div
            aria-label="button with select"
            class="MuiButtonGroup-root-id"
            data-test-id="create-order-button"
            role="group"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-disabled-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
              disabled=""
              style="width:100%"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Create order
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id LimitReachedAlert-root-id Alert-root-id Alert-warning-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      data-test="alert"
    >
      <div
        class="MuiCardContent-root-id"
      >
        <div
          class="Alert-container-id"
        >
          <div
            class="Alert-icon-id"
          >
            <svg
              class="Alert-warning-id"
              fill="none"
              height="40"
              viewBox="0 0 40 40"
              width="40"
              xmlns="http://www.w3.org/2000/svg"
            >
              <circle
                cx="20"
                cy="20"
                fill="var(--background-paper)"
                r="20"
              />
              <circle
                cx="20"
                cy="20"
                r="14"
                stroke="currentColor"
                stroke-width="4"
              />
              <path
                clip-rule="evenodd"
                d="M19.5 11C18.6716 11 18 11.6716 18 12.5V20.5C18 21.3284 18.6716 22 19.5 22H20.5C21.3284 22 22 21.3284 22 20.5V12.5C22 11.6716 21.3284 11 20.5 11H19.5ZM19.5 25C18.6716 25 18 25.6716 18 26.5V27.5C18 28.3284 18.6716 29 19.5 29H20.5C21.3284 29 22 28.3284 22 27.5V26.5C22 25.6716 21.3284 25 20.5 25H19.5Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
          </div>
          <div
            class="Alert-content-id"
          >
            <div
              class="Alert-titleBar-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-h5-id"
              >
                Order limit reached
              </div>
              <button
                class="MuiButtonBase-root-id IconButton-secondary-id Alert-close-id"
                data-test="close"
                tabindex="0"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="25"
                  viewBox="0 0 24 25"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    clip-rule="evenodd"
                    d="M7.53 6.472a.75.75 0 1 0-1.06 1.06l4.47 4.47-4.47 4.47a.75.75 0 0 0 1.06 1.06l4.47-4.47 4.47 4.47a.75.75 0 1 0 1.06-1.06l-4.47-4.47 4.47-4.47a.75.75 0 0 0-1.06-1.06L12 10.942l-4.47-4.47Z"
                    fill="currentColor"
                    fill-rule="evenodd"
                  />
                </svg>
              </button>
            </div>
            You have reached your order limit, you will be billed extra for orders above limit. If you would like to up your limit, contact your administration staff about raising your limits.
          </div>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Orders
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Orders..."
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MjA%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTk%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTg%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTc%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTY%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTU%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTQ%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTM%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTI%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTE%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTA%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6OQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6OA%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6Nw%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6Ng%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6NQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6NA%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6Mw%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6Mg%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MQ%3D%3D"
        />
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colNumber-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Order
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colDate-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Date
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colCustomer-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Customer
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colPayment-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Payment
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colFulfillment-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Fulfillment status
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colTotal-id TableCellHeader-notSortable-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Total
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="6"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #20
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658650376"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Laura Stone 1 2
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Fully paid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Cancelled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                305.17
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #19
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658650124"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Elizabeth Vaughn
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Fully paid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Cancelled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                1,215.89
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #18
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658650019"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                david.lawson@example.com
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-info-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Draft
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                321.71
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #17
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658649864"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Aaron Randall
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Cancelled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                271.95
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #16
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658649610"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Laura Jensen
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Cancelled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                335.84
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #15
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658649336"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Jenna Villa
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Cancelled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                1,042.15
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #14
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658649103"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Wesley Davis
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Cancelled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                213.69
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #13
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648921"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Anthony Gonzalez
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Cancelled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                367.03
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #12
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648750"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Denise Freeman
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Cancelled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                298.76
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #11
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648598"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                James Ball
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Fully paid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unfulfilled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                663.69
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #10
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648409"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Michael Martinez
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Cancelled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                280.41
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #9
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648185"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Melissa Simon
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                234.93
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #8
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647953"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Justin Mccoy
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                485.19
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #7
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647828"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Anthony Gonzalez
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Fully paid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                223.54
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #6
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647636"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Bradley Ford
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Fulfilled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                237.55
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #5
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647420"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                David Lawson
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                453.55
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #4
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647230"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Lauren Watson
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                812.67
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #3
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658646972"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Mark Lee
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                481.41
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #2
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658646751"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Kara Murphy
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Fully paid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                569.19
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #1
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658646314"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Curtis Bailey
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Fully paid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                557.00
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Order list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Orders
        </div>
        <div
          class="OrderListPage-settings-id"
        >
          <button
            aria-haspopup="true"
            aria-label="More"
            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
            color="primary"
            data-test-id="show-more-button"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                clip-rule="evenodd"
                d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
          </button>
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            230/500 orders
          </div>
          <div
            aria-label="button with select"
            class="MuiButtonGroup-root-id"
            data-test-id="create-order-button"
            role="group"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButton-containedPrimary-id"
              style="width:100%"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Create order
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                All Orders
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Orders..."
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id FilterBar-tabActionButton-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            Delete Search
          </span>
        </button>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colNumber-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Order
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colDate-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Date
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colCustomer-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Customer
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colPayment-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Payment
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colFulfillment-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Fulfillment status
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colTotal-id TableCellHeader-notSortable-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Total
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="6"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Order list no limits 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Orders
        </div>
        <div
          class="OrderListPage-settings-id"
        >
          <button
            aria-haspopup="true"
            aria-label="More"
            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
            color="primary"
            data-test-id="show-more-button"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                clip-rule="evenodd"
                d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
          </button>
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div
            aria-label="button with select"
            class="MuiButtonGroup-root-id"
            data-test-id="create-order-button"
            role="group"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButton-containedPrimary-id"
              style="width:100%"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Create order
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Orders
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Orders..."
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MjA%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTk%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTg%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTc%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTY%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTU%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTQ%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTM%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTI%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTE%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MTA%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6OQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6OA%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6Nw%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6Ng%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6NQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6NA%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6Mw%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6Mg%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/orders/T3JkZXI6MQ%3D%3D"
        />
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colNumber-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Order
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colDate-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Date
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colCustomer-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Customer
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colPayment-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Payment
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colFulfillment-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Fulfillment status
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colTotal-id TableCellHeader-notSortable-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Total
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="6"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #20
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658650376"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Laura Stone 1 2
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Fully paid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Cancelled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                305.17
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #19
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658650124"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Elizabeth Vaughn
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Fully paid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Cancelled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                1,215.89
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #18
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658650019"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                david.lawson@example.com
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-info-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Draft
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                321.71
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #17
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658649864"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Aaron Randall
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Cancelled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                271.95
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #16
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658649610"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Laura Jensen
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Cancelled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                335.84
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #15
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658649336"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Jenna Villa
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Cancelled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                1,042.15
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #14
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658649103"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Wesley Davis
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Cancelled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                213.69
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #13
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648921"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Anthony Gonzalez
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Cancelled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                367.03
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #12
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648750"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Denise Freeman
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Cancelled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                298.76
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #11
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648598"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                James Ball
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Fully paid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unfulfilled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                663.69
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #10
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648409"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Michael Martinez
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Cancelled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                280.41
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #9
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648185"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Melissa Simon
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                234.93
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #8
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647953"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Justin Mccoy
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                485.19
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #7
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647828"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Anthony Gonzalez
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Fully paid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                223.54
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #6
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647636"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Bradley Ford
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Fulfilled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                237.55
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #5
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647420"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                David Lawson
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                453.55
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #4
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647230"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Lauren Watson
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                812.67
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #3
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658646972"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Mark Lee
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Unpaid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                481.41
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #2
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658646751"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Kara Murphy
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Fully paid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                569.19
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
              data-test-id="order-table-row"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
              >
                #1
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658646314"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Curtis Bailey
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Fully paid
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Partially fulfilled
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
              >
                <span
                  class="Money-currency-id"
                >
                  USD
                </span>
                557.00
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Order list when no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Orders
        </div>
        <div
          class="OrderListPage-settings-id"
        >
          <button
            aria-haspopup="true"
            aria-label="More"
            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
            color="primary"
            data-test-id="show-more-button"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                clip-rule="evenodd"
                d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
          </button>
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            230/500 orders
          </div>
          <div
            aria-label="button with select"
            class="MuiButtonGroup-root-id"
            data-test-id="create-order-button"
            role="group"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButton-containedPrimary-id"
              style="width:100%"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Create order
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Orders
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Orders..."
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colNumber-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Order
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colDate-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Date
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colCustomer-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Customer
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colPayment-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Payment
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colFulfillment-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Fulfillment status
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colTotal-id TableCellHeader-notSortable-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Total
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="6"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
                colspan="6"
              >
                No orders found
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Order settings default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id ExtendedPageHeader-underline-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Order settings
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="ExtendedPageHeader-underline-id"
      >
        <hr
          class="MuiDivider-root-id"
        />
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            General Settings
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-id="order-settings"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Settings
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <label
              class="MuiFormControlLabel-root-id"
              data-test-id="automatically-confirm-all-new-orders-checkbox"
            >
              <span
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <input
                    checked=""
                    class="PrivateSwitchBase-input-id"
                    data-indeterminate="false"
                    name="automaticallyConfirmAllNewOrders"
                    type="checkbox"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <svg
                      fill="none"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <rect
                        fill="currentColor"
                        height="23"
                        rx="1.5"
                        width="23"
                        x="0.5"
                        y="0.5"
                      />
                      <path
                        clip-rule="evenodd"
                        d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                        fill="var(--background-paper)"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </svg>
                </span>
              </span>
              <span
                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
              >
                Automatically confirm all orders
                <div
                  class="MuiTypography-root-id MuiTypography-caption-id"
                >
                  All orders will be automatically confirmed and all payments will be captured.
                </div>
              </span>
            </label>
            <div
              class="CardSpacer-spacer-id"
            />
            <label
              class="MuiFormControlLabel-root-id"
              data-test-id="automatically-fulfill-non-shippable-gift-cards-checkbox"
            >
              <span
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <input
                    class="PrivateSwitchBase-input-id"
                    data-indeterminate="false"
                    name="automaticallyFulfillNonShippableGiftCard"
                    type="checkbox"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="22"
                      rx="2"
                      ry="2"
                      stroke="currentColor"
                      stroke-linejoin="round"
                      stroke-width="2"
                      width="22"
                      x="1"
                      y="1"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
              >
                Automatically fulfill non shippable gift cards
                <div
                  class="MuiTypography-root-id MuiTypography-caption-id"
                >
                  when activated non-shippable gift cards will be automatically set as fulfilled and sent to customer
                </div>
              </span>
            </label>
          </div>
        </div>
        <div />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-id="order-fulfillment-settings"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Fulfillment settings
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <label
              class="MuiFormControlLabel-root-id"
              data-test-id="fulfillment-auto-approve-checkbox"
            >
              <span
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <input
                    checked=""
                    class="PrivateSwitchBase-input-id"
                    data-indeterminate="false"
                    name="fulfillmentAutoApprove"
                    type="checkbox"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <svg
                      fill="none"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <rect
                        fill="currentColor"
                        height="23"
                        rx="1.5"
                        width="23"
                        x="0.5"
                        y="0.5"
                      />
                      <path
                        clip-rule="evenodd"
                        d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                        fill="var(--background-paper)"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </svg>
                </span>
              </span>
              <span
                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
              >
                Automatically approve all fulfillments
                <div
                  class="MuiTypography-root-id MuiTypography-caption-id"
                >
                  All fulfillments will be automatically approved
                </div>
              </span>
            </label>
            <div
              class="FormSpacer-spacer-id"
            />
            <label
              class="MuiFormControlLabel-root-id"
              data-test-id="fulfillment-allow-unpaid-checkbox"
            >
              <span
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <input
                    checked=""
                    class="PrivateSwitchBase-input-id"
                    data-indeterminate="false"
                    name="fulfillmentAllowUnpaid"
                    type="checkbox"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <svg
                      fill="none"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <rect
                        fill="currentColor"
                        height="23"
                        rx="1.5"
                        width="23"
                        x="0.5"
                        y="0.5"
                      />
                      <path
                        clip-rule="evenodd"
                        d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                        fill="var(--background-paper)"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </svg>
                </span>
              </span>
              <span
                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
              >
                Allow fulfillment without payment
                <div
                  class="MuiTypography-root-id MuiTypography-caption-id"
                >
                  You will be able to fulfill products without capturing payment for the order.
                </div>
              </span>
            </label>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Orders / Order settings loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id ExtendedPageHeader-underline-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Order settings
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="ExtendedPageHeader-underline-id"
      >
        <hr
          class="MuiDivider-root-id"
        />
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            General Settings
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-id="order-settings"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Settings
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <label
              class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              data-test-id="automatically-confirm-all-new-orders-checkbox"
            >
              <span
                aria-disabled="true"
                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                tabindex="-1"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <input
                    class="PrivateSwitchBase-input-id"
                    data-indeterminate="false"
                    disabled=""
                    name="automaticallyConfirmAllNewOrders"
                    type="checkbox"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="22"
                      rx="2"
                      ry="2"
                      stroke="currentColor"
                      stroke-linejoin="round"
                      stroke-width="2"
                      width="22"
                      x="1"
                      y="1"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
              >
                Automatically confirm all orders
                <div
                  class="MuiTypography-root-id MuiTypography-caption-id"
                >
                  All orders will be automatically confirmed and all payments will be captured.
                </div>
              </span>
            </label>
            <div
              class="CardSpacer-spacer-id"
            />
            <label
              class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              data-test-id="automatically-fulfill-non-shippable-gift-cards-checkbox"
            >
              <span
                aria-disabled="true"
                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                tabindex="-1"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <input
                    class="PrivateSwitchBase-input-id"
                    data-indeterminate="false"
                    disabled=""
                    name="automaticallyFulfillNonShippableGiftCard"
                    type="checkbox"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="22"
                      rx="2"
                      ry="2"
                      stroke="currentColor"
                      stroke-linejoin="round"
                      stroke-width="2"
                      width="22"
                      x="1"
                      y="1"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
              >
                Automatically fulfill non shippable gift cards
                <div
                  class="MuiTypography-root-id MuiTypography-caption-id"
                >
                  when activated non-shippable gift cards will be automatically set as fulfilled and sent to customer
                </div>
              </span>
            </label>
          </div>
        </div>
        <div />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-id="order-fulfillment-settings"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Fulfillment settings
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <label
              class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              data-test-id="fulfillment-auto-approve-checkbox"
            >
              <span
                aria-disabled="true"
                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                tabindex="-1"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <input
                    class="PrivateSwitchBase-input-id"
                    data-indeterminate="false"
                    disabled=""
                    name="fulfillmentAutoApprove"
                    type="checkbox"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="22"
                      rx="2"
                      ry="2"
                      stroke="currentColor"
                      stroke-linejoin="round"
                      stroke-width="2"
                      width="22"
                      x="1"
                      y="1"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
              >
                Automatically approve all fulfillments
                <div
                  class="MuiTypography-root-id MuiTypography-caption-id"
                >
                  All fulfillments will be automatically approved
                </div>
              </span>
            </label>
            <div
              class="FormSpacer-spacer-id"
            />
            <label
              class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              data-test-id="fulfillment-allow-unpaid-checkbox"
            >
              <span
                aria-disabled="true"
                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                tabindex="-1"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <input
                    class="PrivateSwitchBase-input-id"
                    data-indeterminate="false"
                    disabled=""
                    name="fulfillmentAllowUnpaid"
                    type="checkbox"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="22"
                      rx="2"
                      ry="2"
                      stroke="currentColor"
                      stroke-linejoin="round"
                      stroke-width="2"
                      width="22"
                      x="1"
                      y="1"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
              >
                Allow fulfillment without payment
                <div
                  class="MuiTypography-root-id MuiTypography-caption-id"
                >
                  You will be able to fulfill products without capturing payment for the order.
                </div>
              </span>
            </label>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Orders / Refund order loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Order no.  - Refund
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Refund Order
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id OrderRefund-cartContent-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="type"
                  class="MuiFormGroup-root-id RadioGroupField-radioGroupInline-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabelInline-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="type"
                          type="radio"
                          value="products"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      Refund Products
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabelInline-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="type"
                          type="radio"
                          value="miscellaneous"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      Miscellaneous Refund
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Refunded Amount
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id OrderRefundAmount-content-id"
            >
              <div
                class="MuiFormGroup-root-id"
                role="radiogroup"
              >
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <span
                    aria-disabled="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                    tabindex="-1"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        checked=""
                        class="PrivateSwitchBase-input-id"
                        disabled=""
                        name="amountCalculationMode"
                        type="radio"
                        value="automatic"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="5"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Automatic Amount
                  </span>
                </label>
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="refundShipmentCosts"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Refund shipment costs
                  </span>
                </label>
                <div
                  class="CardSpacer-spacer-id"
                />
                <div
                  class="OrderRefundAmountValues-container-id"
                />
                <hr
                  class="Hr-root-id OrderRefundAmount-hr-id"
                />
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <span
                    aria-disabled="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                    tabindex="-1"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        disabled=""
                        name="amountCalculationMode"
                        type="radio"
                        value="manual"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="11"
                          stroke="currentColor"
                          stroke-width="2"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Manual Amount
                  </span>
                </label>
              </div>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id OrderRefundAmount-refundButton-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButton-fullWidth-id MuiButtonBase-disabled-id"
                data-test-id="submit"
                disabled=""
                tabindex="-1"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Refund
                </span>
              </button>
              <div
                class="MuiTypography-root-id OrderRefundAmount-refundCaution-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
              >
                Refunded items can't be fulfilled
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Orders / Refund order miscellaneous 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Order no. 22 - Refund
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Refund Order
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id OrderRefund-cartContent-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="type"
                  class="MuiFormGroup-root-id RadioGroupField-radioGroupInline-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabelInline-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="products"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Refund Products
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabelInline-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="miscellaneous"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Miscellaneous Refund
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Refunded Amount
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id OrderRefundAmount-content-id"
            >
              <div
                class="OrderRefundAmountValues-container-id"
              >
                <div
                  class="OrderRefundAmountValues-row-id"
                >
                  Authorized Amount
                  <div>
                    <span
                      class="Money-currency-id"
                    >
                      USD
                    </span>
                    744.38
                  </div>
                </div>
                <div
                  class="OrderRefundAmountValues-row-id"
                >
                  Previously refunded
                  <div>
                    <span
                      class="Money-currency-id"
                    >
                      USD
                    </span>
                    -100.00
                  </div>
                </div>
                <div
                  class="OrderRefundAmountValues-row-id OrderRefundAmountValues-highlightedRow-id"
                >
                  Max Refund
                  <div>
                    <span
                      class="Money-currency-id"
                    >
                      USD
                    </span>
                    644.38
                  </div>
                </div>
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id OrderRefundAmount-priceField-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Amount
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    max="644.38"
                    min="0"
                    name="amount"
                    step="0.01"
                    type="number"
                  />
                  <div
                    class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      USD
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Amount
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id OrderRefundAmount-refundButton-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButton-fullWidth-id MuiButtonBase-disabled-id"
                data-test-id="submit"
                disabled=""
                tabindex="-1"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Refund
                </span>
              </button>
              <div
                class="MuiTypography-root-id OrderRefundAmount-refundCaution-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
              >
                Refunded items can't be fulfilled
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Orders / Refund order products 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Order no. 22 - Refund
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Refund Order
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id OrderRefund-cartContent-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="type"
                  class="MuiFormGroup-root-id RadioGroupField-radioGroupInline-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabelInline-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="products"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Refund Products
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabelInline-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="miscellaneous"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Miscellaneous Refund
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Unfulfilled Products
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id OrderRefundUnfulfilledProducts-cartContent-id"
            >
              <div
                class="MuiTypography-root-id OrderRefundUnfulfilledProducts-notice-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
              >
                Unfulfilled products will be restocked
              </div>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id OrderRefundUnfulfilledProducts-setMaximalQuantityButton-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                data-test-id="set-maximal-quantity-unfulfilled-button"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Set maximal quantities
                </span>
              </button>
            </div>
            <table
              class="MuiTable-root-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id"
                    scope="col"
                  >
                    Product
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id"
                    scope="col"
                  >
                    Price
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id"
                    scope="col"
                  >
                    Refunded Qty
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id"
                    scope="col"
                  >
                    Total
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                    data-test-id="table-cell-avatar"
                    thumbnail="placeholder60x60.png"
                  >
                    <div
                      class="Avatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder60x60.png"
                        />
                      </div>
                      <div
                        class="Avatar-children-id"
                      >
                        Milk
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    <span
                      class="Money-currency-id"
                    >
                      USD
                    </span>
                    26.02
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderRefundUnfulfilledProducts-colQuantity-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderRefundUnfulfilledProducts-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          data-test-id="quantity-inputdiufhdsif"
                          max="16"
                          min="0"
                          style="text-align:right"
                          type="number"
                          value="0"
                        />
                        <div
                          class="OrderRefundUnfulfilledProducts-remainingQuantity-id"
                        >
                          / 16
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    <span
                      class="Money-currency-id"
                    >
                      USD
                    </span>
                    0.00
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                    data-test-id="table-cell-avatar"
                    thumbnail="placeholder60x60.png"
                  >
                    <div
                      class="Avatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder60x60.png"
                        />
                      </div>
                      <div
                        class="Avatar-children-id"
                      >
                        Coffee
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    <span
                      class="Money-currency-id"
                    >
                      USD
                    </span>
                    10.00
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderRefundUnfulfilledProducts-colQuantity-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderRefundUnfulfilledProducts-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          data-test-id="quantity-inputfdsfdfdsf"
                          max="8"
                          min="0"
                          style="text-align:right"
                          type="number"
                          value="0"
                        />
                        <div
                          class="OrderRefundUnfulfilledProducts-remainingQuantity-id"
                        >
                          / 8
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    <span
                      class="Money-currency-id"
                    >
                      USD
                    </span>
                    0.00
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Fulfillment
                  <div
                    class="MuiTypography-root-id OrderRefundFulfilledProducts-orderNumber-id MuiTypography-body1-id"
                  >
                    #22-1
                  </div>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id OrderRefundFulfilledProducts-cartContent-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id OrderRefundFulfilledProducts-setMaximalQuantityButton-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                data-test-id="set-maximal-quantity-fulfilled-button-f12345qwertyu"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Set maximal quantities
                </span>
              </button>
            </div>
            <table
              class="MuiTable-root-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id"
                    scope="col"
                  >
                    Product
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id"
                    scope="col"
                  >
                    Price
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id"
                    scope="col"
                  >
                    Refunded Qty
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id"
                    scope="col"
                  >
                    Total
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                    data-test-id="table-cell-avatar"
                    thumbnail="placeholder60x60.png"
                  >
                    <div
                      class="Avatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder60x60.png"
                        />
                      </div>
                      <div
                        class="Avatar-children-id"
                      >
                        Milk
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    <span
                      class="Money-currency-id"
                    >
                      USD
                    </span>
                    26.02
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderRefundFulfilledProducts-colQuantity-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderRefundFulfilledProducts-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          data-test-id="quantityInputfg3333fu66666"
                          max="1"
                          min="0"
                          style="text-align:right"
                          type="number"
                          value="0"
                        />
                        <div
                          class="OrderRefundFulfilledProducts-remainingQuantity-id"
                        >
                          / 1
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    <span
                      class="Money-currency-id"
                    >
                      USD
                    </span>
                    0.00
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                    data-test-id="table-cell-avatar"
                    thumbnail="placeholder60x60.png"
                  >
                    <div
                      class="Avatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder60x60.png"
                        />
                      </div>
                      <div
                        class="Avatar-children-id"
                      >
                        Coffee
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    <span
                      class="Money-currency-id"
                    >
                      USD
                    </span>
                    10.00
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderRefundFulfilledProducts-colQuantity-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderRefundFulfilledProducts-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          data-test-id="quantityInputfgytrytytu88977"
                          max="1"
                          min="0"
                          style="text-align:right"
                          type="number"
                          value="0"
                        />
                        <div
                          class="OrderRefundFulfilledProducts-remainingQuantity-id"
                        >
                          / 1
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    <span
                      class="Money-currency-id"
                    >
                      USD
                    </span>
                    0.00
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Fulfillment
                  <div
                    class="MuiTypography-root-id OrderRefundFulfilledProducts-orderNumber-id MuiTypography-body1-id"
                  >
                    #22-2
                  </div>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id OrderRefundFulfilledProducts-cartContent-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id OrderRefundFulfilledProducts-setMaximalQuantityButton-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                data-test-id="set-maximal-quantity-fulfilled-button-876543jhgfdfd"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Set maximal quantities
                </span>
              </button>
            </div>
            <table
              class="MuiTable-root-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id"
                    scope="col"
                  >
                    Product
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id"
                    scope="col"
                  >
                    Price
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id"
                    scope="col"
                  >
                    Refunded Qty
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id"
                    scope="col"
                  >
                    Total
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                    data-test-id="table-cell-avatar"
                    thumbnail="placeholder60x60.png"
                  >
                    <div
                      class="Avatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder60x60.png"
                        />
                      </div>
                      <div
                        class="Avatar-children-id"
                      >
                        Milk
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    <span
                      class="Money-currency-id"
                    >
                      USD
                    </span>
                    26.02
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderRefundFulfilledProducts-colQuantity-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderRefundFulfilledProducts-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          data-test-id="quantityInputfgydgsyfu23456"
                          max="2"
                          min="0"
                          style="text-align:right"
                          type="number"
                          value="0"
                        />
                        <div
                          class="OrderRefundFulfilledProducts-remainingQuantity-id"
                        >
                          / 2
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    <span
                      class="Money-currency-id"
                    >
                      USD
                    </span>
                    0.00
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                    data-test-id="table-cell-avatar"
                    thumbnail="placeholder60x60.png"
                  >
                    <div
                      class="Avatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder60x60.png"
                        />
                      </div>
                      <div
                        class="Avatar-children-id"
                      >
                        Coffee
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    <span
                      class="Money-currency-id"
                    >
                      USD
                    </span>
                    10.00
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderRefundFulfilledProducts-colQuantity-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderRefundFulfilledProducts-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          data-test-id="quantityInputfgydgsyfu555444"
                          max="4"
                          min="0"
                          style="text-align:right"
                          type="number"
                          value="0"
                        />
                        <div
                          class="OrderRefundFulfilledProducts-remainingQuantity-id"
                        >
                          / 4
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    <span
                      class="Money-currency-id"
                    >
                      USD
                    </span>
                    0.00
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Refunded Amount
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id OrderRefundAmount-content-id"
            >
              <div
                class="MuiFormGroup-root-id"
                role="radiogroup"
              >
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        checked=""
                        class="PrivateSwitchBase-input-id"
                        name="amountCalculationMode"
                        type="radio"
                        value="automatic"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="currentColor"
                          r="12"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="5"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Automatic Amount
                  </span>
                </label>
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="refundShipmentCosts"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Refund shipment costs
                  </span>
                </label>
                <div
                  class="CardSpacer-spacer-id"
                />
                <div
                  class="OrderRefundAmountValues-container-id"
                >
                  <div
                    class="OrderRefundAmountValues-row-id"
                  >
                    Authorized Amount
                    <div>
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      744.38
                    </div>
                  </div>
                  <div
                    class="OrderRefundAmountValues-row-id"
                  >
                    Selected Products Value
                    <div>
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </div>
                  </div>
                  <div
                    class="OrderRefundAmountValues-row-id"
                  >
                    Previously refunded
                    <div>
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      -100.00
                    </div>
                  </div>
                  <div
                    class="OrderRefundAmountValues-row-id OrderRefundAmountValues-highlightedRow-id"
                  >
                    Max Refund
                    <div>
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      644.38
                    </div>
                  </div>
                  <div
                    class="OrderRefundAmountValues-row-id OrderRefundAmountValues-highlightedRow-id"
                  >
                    Refund total amount
                    <div>
                      <span
                        class="Money-currency-id"
                      >
                        USD
                      </span>
                      0.00
                    </div>
                  </div>
                </div>
                <hr
                  class="Hr-root-id OrderRefundAmount-hr-id"
                />
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        name="amountCalculationMode"
                        type="radio"
                        value="manual"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          fill="var(--background-paper)"
                          r="11"
                          stroke="currentColor"
                          stroke-width="2"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Manual Amount
                  </span>
                </label>
              </div>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id OrderRefundAmount-refundButton-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButton-fullWidth-id MuiButtonBase-disabled-id"
                data-test-id="submit"
                disabled=""
                tabindex="-1"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Refund
                </span>
              </button>
              <div
                class="MuiTypography-root-id OrderRefundAmount-refundCaution-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
              >
                Refunded items can't be fulfilled
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Page types / Create page type default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Create Page Type
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            General Information
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            These are general information about this Content Type.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                General Information
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                data-shrink="false"
              >
                Content Type Name
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="name"
                  type="text"
                  value=""
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id"
                  >
                    <span>
                      Content Type Name
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
        </div>
        <hr
          class="Hr-root-id PageTypeCreatePage-hr-id"
        />
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Metadata
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="false"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="true"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Private Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
        <div />
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Page types / Create page type form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Create Page Type
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            General Information
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            These are general information about this Content Type.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                General Information
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                data-shrink="false"
              >
                Content Type Name
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="true"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="name"
                  type="text"
                  value=""
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id"
                  >
                    <span>
                      Content Type Name
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
              >
                This field is required
              </p>
            </div>
          </div>
        </div>
        <hr
          class="Hr-root-id PageTypeCreatePage-hr-id"
        />
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Metadata
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="false"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="true"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Private Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
        <div />
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Page types / Create page type loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Create Page Type
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            General Information
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            These are general information about this Content Type.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                General Information
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                data-shrink="false"
              >
                Content Type Name
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                  disabled=""
                  name="name"
                  type="text"
                  value=""
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id"
                  >
                    <span>
                      Content Type Name
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
        </div>
        <hr
          class="Hr-root-id PageTypeCreatePage-hr-id"
        />
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Metadata
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="false"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="true"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Private Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
        <div />
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Page types / Page type details default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Blog
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            General Information
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            These are general information about this Content Type.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                General Information
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Content Type Name
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="name"
                  type="text"
                  value="Blog"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                  >
                    <span>
                      Content Type Name
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
        </div>
        <hr
          class="Hr-root-id PageTypeDetailsPage-hr-id"
        />
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Content Attributes
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            This list shows all attributes that will be assigned to pages that have this page type assigned.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-id="page-attributes"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Content Attributes
              </span>
            </div>
            <div
              class="MuiCardHeader-action-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                data-test-id="assign-attributes"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Assign attribute
                </span>
              </button>
            </div>
          </div>
          <div
            class="ResponsiveTable-root-id"
          >
            <a
              class="TableRowLink-link-id"
              href="/attributes/UHJvZHVjdEF0dHJpYnV0ZTo5"
            />
            <a
              class="TableRowLink-link-id"
              href="/attributes/UHJvZHVjdEF0dHJpYnV0ZToxMQ%3D%3D"
            />
            <a
              class="TableRowLink-link-id"
              href="/attributes/UHJvZHVjdEF0dHJpYnV0ZTo5"
            />
            <table
              class="MuiTable-root-id"
            >
              <colgroup>
                <col
                  class="PageTypeAttributes-colGrab-id"
                />
                <col />
                <col
                  class="PageTypeAttributes-colName-id"
                />
                <col
                  class="PageTypeAttributes-colSlug-id"
                />
                <col
                  class="PageTypeAttributes-colAction-id"
                />
              </colgroup>
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id"
                    scope="col"
                  />
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id TableHead-dragRows-id MuiTableCell-paddingCheckbox-id"
                    scope="col"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id PageTypeAttributes-colName-id"
                    scope="col"
                  >
                    Attribute name
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id PageTypeAttributes-colName-id"
                    scope="col"
                  >
                    Slug
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id"
                    scope="col"
                  />
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id PageTypeAttributes-link-id MuiTableRow-hover-id"
                  data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTo5"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clip-rule="evenodd"
                        d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                        fill="currentColor"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colName-id"
                    data-test-id="name"
                  >
                    Author
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colSlug-id"
                    data-test-id="slug"
                  >
                    author
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id PageTypeAttributes-link-id MuiTableRow-hover-id"
                  data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZToxMQ=="
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clip-rule="evenodd"
                        d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                        fill="currentColor"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colName-id"
                    data-test-id="name"
                  >
                    Language
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colSlug-id"
                    data-test-id="slug"
                  >
                    language
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id PageTypeAttributes-link-id MuiTableRow-hover-id"
                  data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTo5"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clip-rule="evenodd"
                        d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                        fill="currentColor"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colName-id"
                    data-test-id="name"
                  >
                    Author
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colSlug-id"
                    data-test-id="slug"
                  >
                    author
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <hr
          class="Hr-root-id PageTypeDetailsPage-hr-id"
        />
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Metadata
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="false"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              1 string
            </div>
          </div>
          <table
            class="MuiTable-root-id Metadata-table-id"
          >
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                  scope="col"
                >
                  Field
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                  scope="col"
                >
                  Value
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                  scope="col"
                >
                  Actions
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id"
                data-test-id="field"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                >
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                        name="name:0"
                        type="text"
                        value="integration.id"
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                >
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                        name="value:0"
                        rows="1"
                      >
                        100023123
                      </textarea>
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                >
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                    data-test-id="delete-field-0"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="true"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Private Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Page types / Page type details form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Blog
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            General Information
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            These are general information about this Content Type.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                General Information
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Content Type Name
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="true"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="name"
                  type="text"
                  value="Blog"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                  >
                    <span>
                      Content Type Name
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
              >
                This field is required
              </p>
            </div>
          </div>
        </div>
        <hr
          class="Hr-root-id PageTypeDetailsPage-hr-id"
        />
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Content Attributes
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            This list shows all attributes that will be assigned to pages that have this page type assigned.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-id="page-attributes"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Content Attributes
              </span>
            </div>
            <div
              class="MuiCardHeader-action-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                data-test-id="assign-attributes"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Assign attribute
                </span>
              </button>
            </div>
          </div>
          <div
            class="ResponsiveTable-root-id"
          >
            <a
              class="TableRowLink-link-id"
              href="/attributes/UHJvZHVjdEF0dHJpYnV0ZTo5"
            />
            <a
              class="TableRowLink-link-id"
              href="/attributes/UHJvZHVjdEF0dHJpYnV0ZToxMQ%3D%3D"
            />
            <a
              class="TableRowLink-link-id"
              href="/attributes/UHJvZHVjdEF0dHJpYnV0ZTo5"
            />
            <table
              class="MuiTable-root-id"
            >
              <colgroup>
                <col
                  class="PageTypeAttributes-colGrab-id"
                />
                <col />
                <col
                  class="PageTypeAttributes-colName-id"
                />
                <col
                  class="PageTypeAttributes-colSlug-id"
                />
                <col
                  class="PageTypeAttributes-colAction-id"
                />
              </colgroup>
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id"
                    scope="col"
                  />
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id TableHead-dragRows-id MuiTableCell-paddingCheckbox-id"
                    scope="col"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id PageTypeAttributes-colName-id"
                    scope="col"
                  >
                    Attribute name
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id PageTypeAttributes-colName-id"
                    scope="col"
                  >
                    Slug
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id"
                    scope="col"
                  />
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id PageTypeAttributes-link-id MuiTableRow-hover-id"
                  data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTo5"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clip-rule="evenodd"
                        d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                        fill="currentColor"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colName-id"
                    data-test-id="name"
                  >
                    Author
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colSlug-id"
                    data-test-id="slug"
                  >
                    author
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id PageTypeAttributes-link-id MuiTableRow-hover-id"
                  data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZToxMQ=="
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clip-rule="evenodd"
                        d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                        fill="currentColor"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colName-id"
                    data-test-id="name"
                  >
                    Language
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colSlug-id"
                    data-test-id="slug"
                  >
                    language
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id PageTypeAttributes-link-id MuiTableRow-hover-id"
                  data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTo5"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clip-rule="evenodd"
                        d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                        fill="currentColor"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colName-id"
                    data-test-id="name"
                  >
                    Author
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colSlug-id"
                    data-test-id="slug"
                  >
                    author
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <hr
          class="Hr-root-id PageTypeDetailsPage-hr-id"
        />
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Metadata
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="false"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              1 string
            </div>
          </div>
          <table
            class="MuiTable-root-id Metadata-table-id"
          >
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                  scope="col"
                >
                  Field
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                  scope="col"
                >
                  Value
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                  scope="col"
                >
                  Actions
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id"
                data-test-id="field"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                >
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                        name="name:0"
                        type="text"
                        value="integration.id"
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                >
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                        name="value:0"
                        rows="1"
                      >
                        100023123
                      </textarea>
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                >
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                    data-test-id="delete-field-0"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="true"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Private Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Page types / Page type details loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
              style="width:10em"
            >
              ‌
            </span>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            General Information
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            These are general information about this Content Type.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                General Information
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                data-shrink="false"
              >
                Content Type Name
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                  disabled=""
                  name="name"
                  type="text"
                  value=""
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id"
                  >
                    <span>
                      Content Type Name
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
        </div>
        <hr
          class="Hr-root-id PageTypeDetailsPage-hr-id"
        />
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Content Attributes
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            This list shows all attributes that will be assigned to pages that have this page type assigned.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-id="page-attributes"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Content Attributes
              </span>
            </div>
            <div
              class="MuiCardHeader-action-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                data-test-id="assign-attributes"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Assign attribute
                </span>
              </button>
            </div>
          </div>
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <colgroup>
                <col
                  class="PageTypeAttributes-colGrab-id"
                />
                <col />
                <col
                  class="PageTypeAttributes-colName-id"
                />
                <col
                  class="PageTypeAttributes-colSlug-id"
                />
                <col
                  class="PageTypeAttributes-colAction-id"
                />
              </colgroup>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id"
                  data-test-id="id-undefined"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clip-rule="evenodd"
                        d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                        fill="currentColor"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          disabled=""
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colName-id"
                    data-test-id="name"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                      data-test-id="skeleton"
                    >
                      ‌
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colSlug-id"
                    data-test-id="slug"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                      data-test-id="skeleton"
                    >
                      ‌
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <hr
          class="Hr-root-id PageTypeDetailsPage-hr-id"
        />
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Metadata
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="false"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
            >
              ‌
            </span>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="true"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Private Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
            >
              ‌
            </span>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Page types / Page type details no attributes 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Blog
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            General Information
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            These are general information about this Content Type.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                General Information
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Content Type Name
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="name"
                  type="text"
                  value="Blog"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                  >
                    <span>
                      Content Type Name
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
        </div>
        <hr
          class="Hr-root-id PageTypeDetailsPage-hr-id"
        />
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Content Attributes
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            This list shows all attributes that will be assigned to pages that have this page type assigned.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-id="page-attributes"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Content Attributes
              </span>
            </div>
            <div
              class="MuiCardHeader-action-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                data-test-id="assign-attributes"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Assign attribute
                </span>
              </button>
            </div>
          </div>
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <colgroup>
                <col
                  class="PageTypeAttributes-colGrab-id"
                />
                <col />
                <col
                  class="PageTypeAttributes-colName-id"
                />
                <col
                  class="PageTypeAttributes-colSlug-id"
                />
                <col
                  class="PageTypeAttributes-colAction-id"
                />
              </colgroup>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                    colspan="5"
                  >
                    No attributes found
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <hr
          class="Hr-root-id PageTypeDetailsPage-hr-id"
        />
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Metadata
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="false"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              1 string
            </div>
          </div>
          <table
            class="MuiTable-root-id Metadata-table-id"
          >
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                  scope="col"
                >
                  Field
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                  scope="col"
                >
                  Value
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                  scope="col"
                >
                  Actions
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id"
                data-test-id="field"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                >
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                        name="name:0"
                        type="text"
                        value="integration.id"
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                >
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                        name="value:0"
                        rows="1"
                      >
                        100023123
                      </textarea>
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                >
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                    data-test-id="delete-field-0"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test-expanded="true"
          data-test-id="metadata-editor"
          data-test-is-private="true"
        >
          <div
            class="MuiCardHeader-root-id Metadata-header-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Private Metadata
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                  data-test-id="expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10.5 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="10.25"
                      stroke="currentColor"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No metadata created for this element. Use the button below to add new metadata field.
            </div>
          </div>
          <div
            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
              data-test-id="add-field"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add Field
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Page types / Page types list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Page Types
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-page-type"
            href="/page-types/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create page type
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Page Types
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="SearchBar-root-id"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Page Type"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <a
          class="TableRowLink-link-id"
          href="/page-types/UGFnZVR5cGU6MQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/page-types/UGFnZVR5cGU6Mw%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/page-types/UGFnZVR5cGU6Mg%3D%3D"
        />
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PageTypeList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Content Type Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="2"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  />
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id PageTypeList-link-id MuiTableRow-hover-id"
              data-test-id="id-UGFnZVR5cGU6MQ=="
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PageTypeList-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  Blog
                </span>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id PageTypeList-link-id MuiTableRow-hover-id"
              data-test-id="id-UGFnZVR5cGU6Mw=="
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PageTypeList-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  Landing Page
                </span>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id PageTypeList-link-id MuiTableRow-hover-id"
              data-test-id="id-UGFnZVR5cGU6Mg=="
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PageTypeList-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  Marketing Page
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Page types / Page types list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Page Types
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-page-type"
            href="/page-types/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create page type
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Page Types
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="SearchBar-root-id"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Page Type"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PageTypeList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Content Type Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="2"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  />
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id"
              data-test-id="id-undefined"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PageTypeList-colName-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Page types / Page types list no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Page Types
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-page-type"
            href="/page-types/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create page type
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Page Types
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="SearchBar-root-id"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Page Type"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PageTypeList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Content Type Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="1"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  />
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
                colspan="1"
              >
                No page types found
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Pages / Page details default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            About
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id PageInfo-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Title
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="title"
                    type="text"
                    value="About"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Title
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-content"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Content
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                />
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Search Engine Preview
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this page easier to find
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Attributes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Attributes-cardContent-id"
            >
              <div
                class="Attributes-expansionBar-id"
              >
                <div
                  class="Attributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    2 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
                  data-test-id="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Author
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-71-label"
                    class="SingleAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Value
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-71-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-71-input"
                          type="text"
                          value="Dylan Lamb"
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="SingleAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Value
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Tag
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-72-label"
                    class="MultiAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Values
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-72-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-72-menu"
                          role="listbox"
                          type="text"
                          value=""
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="MultiAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Values
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                  <div
                    class="MultiAutocompleteSelectField-chipContainer-id"
                  >
                    <div
                      class="MultiAutocompleteSelectField-chip-id"
                    >
                      <div
                        class="MultiAutocompleteSelectField-chipInner-id"
                      >
                        <div
                          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                        >
                          Security
                        </div>
                        <button
                          class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                          data-test-id="remove"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.id"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          100023123
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Visibility
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
              >
                <div
                  aria-label="isPublished"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="isPublished"
                          type="radio"
                          value="true"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      <p
                        class="VisibilityCard-label-id"
                      >
                        Visible
                      </p>
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="isPublished"
                          type="radio"
                          value="false"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      <p
                        class="VisibilityCard-label-id"
                      >
                        Hidden
                      </p>
                    </span>
                  </label>
                </div>
              </div>
              <div
                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
              >
                Set publication date
              </div>
              <div
                class="VisibilityCard-children-id"
              />
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Organize Content
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id PageOrganizeContent-label-id MuiTypography-caption-id"
              >
                Content type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Blog
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Pages / Page details form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            About
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id PageInfo-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Title
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="title"
                    type="text"
                    value="About"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Title
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Invalid value
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-content"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Content
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Invalid value
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Search Engine Preview
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this page easier to find
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Attributes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Attributes-cardContent-id"
            >
              <div
                class="Attributes-expansionBar-id"
              >
                <div
                  class="Attributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    2 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
                  data-test-id="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Author
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-74-label"
                    class="SingleAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Value
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-74-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-74-input"
                          type="text"
                          value="Dylan Lamb"
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="SingleAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Value
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Tag
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-75-label"
                    class="MultiAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Values
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-75-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-75-menu"
                          role="listbox"
                          type="text"
                          value=""
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="MultiAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Values
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                  <div
                    class="MultiAutocompleteSelectField-chipContainer-id"
                  >
                    <div
                      class="MultiAutocompleteSelectField-chip-id"
                    >
                      <div
                        class="MultiAutocompleteSelectField-chipInner-id"
                      >
                        <div
                          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                        >
                          Security
                        </div>
                        <button
                          class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                          data-test-id="remove"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.id"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          100023123
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Visibility
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
              >
                <div
                  aria-label="isPublished"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="isPublished"
                          type="radio"
                          value="true"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      <p
                        class="VisibilityCard-label-id"
                      >
                        Visible
                      </p>
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="isPublished"
                          type="radio"
                          value="false"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      <p
                        class="VisibilityCard-label-id"
                      >
                        Hidden
                      </p>
                    </span>
                  </label>
                </div>
              </div>
              <div
                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
              >
                Set publication date
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorError-id"
              >
                Page field error
              </div>
              <div
                class="VisibilityCard-children-id"
              />
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Organize Content
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id PageOrganizeContent-label-id MuiTypography-caption-id"
              >
                Content type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Blog
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Pages / Page details loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
              style="width:10em"
            >
              ‌
            </span>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id PageInfo-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Title
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="title"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Title
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-content"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Content
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
                />
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Search Engine Preview
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this page easier to find
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Visibility
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
              >
                <div
                  aria-label="isPublished"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="isPublished"
                          type="radio"
                          value="true"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      <p
                        class="VisibilityCard-label-id"
                      >
                        Visible
                      </p>
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="isPublished"
                          type="radio"
                          value="false"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      <p
                        class="VisibilityCard-label-id"
                      >
                        Hidden
                      </p>
                    </span>
                  </label>
                </div>
              </div>
              <div
                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
              >
                Set publication date
              </div>
              <div
                class="VisibilityCard-children-id"
              />
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Organize Content
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-73-label"
                class="SingleAutocompleteSelectField-container-id"
                data-test-id="page-types-autocomplete-select"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Select content type
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-73-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      disabled=""
                      id="downshift-73-input"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Select content type
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Pages / Page list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Pages
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-page"
            href="/pages/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create page
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Pages
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Pages"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="ResponsiveTable-root-id"
        >
          <a
            class="TableRowLink-link-id"
            href="/pages/Jzx123sEt%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/pages/Jzx123sEx%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/pages/Jzx123sEu%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/pages/Jzx123sEm%3D%3D"
          />
          <table
            class="MuiTable-root-id"
          >
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                  scope="col"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PageList-colTitle-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Title
                    </div>
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="24"
                        width="24"
                      />
                      <path
                        clip-rule="evenodd"
                        d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                        fill="currentColor"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PageList-colSlug-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Slug
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PageList-colVisibility-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Visibility
                    </div>
                  </div>
                </th>
              </tr>
            </thead>
            <tfoot
              class="MuiTableFooter-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id"
                  colspan="4"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                  >
                    <div
                      class="Pagination-spacer-id"
                    >
                      <div
                        class="Pagination-rowNumber-id"
                      >
                        <span
                          class="Pagination-rowNumberLabel-id"
                        >
                          No. of rows
                        </span>
                         20
                      </div>
                    </div>
                    <div
                      class="Pagination-actions-id"
                    >
                      <button
                        aria-label="previous page"
                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-back"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                          />
                        </svg>
                      </button>
                      <button
                        aria-label="next page"
                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-next"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                </td>
              </tr>
            </tfoot>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id PageList-link-id MuiTableRow-hover-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id PageList-colTitle-id"
                >
                  About
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id PageList-colSlug-id"
                >
                  about
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id PageList-colVisibility-id"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id PageList-link-id MuiTableRow-hover-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id PageList-colTitle-id"
                >
                  About
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id PageList-colSlug-id"
                >
                  about
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id PageList-colVisibility-id"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-error-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Not Published
                    </span>
                  </div>
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id PageList-link-id MuiTableRow-hover-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id PageList-colTitle-id"
                >
                  About
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id PageList-colSlug-id"
                >
                  about
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id PageList-colVisibility-id"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id PageList-link-id MuiTableRow-hover-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id PageList-colTitle-id"
                >
                  About
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id PageList-colSlug-id"
                >
                  about
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id PageList-colVisibility-id"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Pages / Page list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Pages
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-page"
            href="/pages/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create page
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Pages
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Pages"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="ResponsiveTable-root-id"
        >
          <table
            class="MuiTable-root-id"
          >
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                  scope="col"
                >
                  <span
                    aria-disabled="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                    tabindex="-1"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        disabled=""
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PageList-colTitle-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Title
                    </div>
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="24"
                        width="24"
                      />
                      <path
                        clip-rule="evenodd"
                        d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                        fill="currentColor"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PageList-colSlug-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Slug
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PageList-colVisibility-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Visibility
                    </div>
                  </div>
                </th>
              </tr>
            </thead>
            <tfoot
              class="MuiTableFooter-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id"
                  colspan="4"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                  >
                    <div
                      class="Pagination-spacer-id"
                    >
                      <div
                        class="Pagination-rowNumber-id"
                      >
                        <span
                          class="Pagination-rowNumberLabel-id"
                        >
                          No. of rows
                        </span>
                         20
                      </div>
                    </div>
                    <div
                      class="Pagination-actions-id"
                    >
                      <button
                        aria-label="previous page"
                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-back"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                          />
                        </svg>
                      </button>
                      <button
                        aria-label="next page"
                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-next"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                </td>
              </tr>
            </tfoot>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                    tabindex="-1"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        disabled=""
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id PageList-colTitle-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                    data-test-id="skeleton"
                  >
                    ‌
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id PageList-colSlug-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                    data-test-id="skeleton"
                  >
                    ‌
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id PageList-colVisibility-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                    data-test-id="skeleton"
                  >
                    ‌
                  </span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Pages / Page list no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Pages
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-page"
            href="/pages/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create page
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Pages
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Pages"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="ResponsiveTable-root-id"
        >
          <table
            class="MuiTable-root-id"
          >
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PageList-colTitle-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Title
                    </div>
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="24"
                        width="24"
                      />
                      <path
                        clip-rule="evenodd"
                        d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                        fill="currentColor"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PageList-colSlug-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Slug
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PageList-colVisibility-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Visibility
                    </div>
                  </div>
                </th>
              </tr>
            </thead>
            <tfoot
              class="MuiTableFooter-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id"
                  colspan="4"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                  >
                    <div
                      class="Pagination-spacer-id"
                    >
                      <div
                        class="Pagination-rowNumber-id"
                      >
                        <span
                          class="Pagination-rowNumberLabel-id"
                        >
                          No. of rows
                        </span>
                         20
                      </div>
                    </div>
                    <div
                      class="Pagination-actions-id"
                    >
                      <button
                        aria-label="previous page"
                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-back"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                          />
                        </svg>
                      </button>
                      <button
                        aria-label="next page"
                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-next"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                </td>
              </tr>
            </tfoot>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id"
                  colspan="4"
                >
                  No pages found
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Permission Groups / Permission Group Create default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Group name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Group name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Permissions
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Expand or restrict group's permissions to access certain part of saleor system.
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                    data-test-id="full-access"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="fullAccess"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Group has full access to the store
                  </span>
                </div>
              </div>
            </div>
            <hr
              class="AccountPermissions-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_DISCOUNTS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_DISCOUNTS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_DISCOUNTS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage sales and vouchers
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_MENUS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_MENUS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_MENUS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage navigation
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_ORDERS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_ORDERS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_ORDERS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage orders
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_PAGES"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_PAGES"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_PAGES"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage pages
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_PRODUCTS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_PRODUCTS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_PRODUCTS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage products
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage product types and attributes
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_SETTINGS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_SETTINGS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_SETTINGS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage settings
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_SHIPPING"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_SHIPPING"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_SHIPPING"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage shipping
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_STAFF"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_STAFF"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_STAFF"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage staff
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_USERS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_USERS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_USERS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage customers
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_PLUGINS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_PLUGINS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_PLUGINS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage plugins
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_APPS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_APPS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_APPS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage apps
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_APPS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_APPS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_APPS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage webhooks
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div />
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Permission Groups / Permission Group Create errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                  data-shrink="false"
                >
                  Group name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Group name
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  This name should be unique
                </p>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Permissions
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Expand or restrict group's permissions to access certain part of saleor system.
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                    data-test-id="full-access"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="fullAccess"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Group has full access to the store
                  </span>
                </div>
              </div>
            </div>
            <hr
              class="AccountPermissions-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_DISCOUNTS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_DISCOUNTS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_DISCOUNTS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage sales and vouchers
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_MENUS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_MENUS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_MENUS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage navigation
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_ORDERS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_ORDERS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_ORDERS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage orders
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_PAGES"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_PAGES"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_PAGES"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage pages
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_PRODUCTS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_PRODUCTS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_PRODUCTS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage products
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage product types and attributes
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_SETTINGS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_SETTINGS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_SETTINGS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage settings
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_SHIPPING"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_SHIPPING"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_SHIPPING"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage shipping
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_STAFF"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_STAFF"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_STAFF"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage staff
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_USERS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_USERS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_USERS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage customers
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_PLUGINS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_PLUGINS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_PLUGINS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage plugins
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_APPS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_APPS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_APPS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage apps
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_APPS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_APPS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_APPS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage webhooks
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div />
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Permission Groups / Permission Group Create loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Group name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Group name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Permissions
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Expand or restrict group's permissions to access certain part of saleor system.
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiIconButton-edgeStart-id MuiButtonBase-disabled-id"
                    data-test-id="full-access"
                    tabindex="-1"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="fullAccess"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        disabled=""
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Group has full access to the store
                  </span>
                </div>
              </div>
            </div>
            <hr
              class="AccountPermissions-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_DISCOUNTS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_DISCOUNTS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_DISCOUNTS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage sales and vouchers
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_MENUS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_MENUS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_MENUS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage navigation
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_ORDERS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_ORDERS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_ORDERS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage orders
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_PAGES"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_PAGES"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_PAGES"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage pages
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_PRODUCTS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_PRODUCTS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_PRODUCTS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage products
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage product types and attributes
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_SETTINGS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_SETTINGS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_SETTINGS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage settings
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_SHIPPING"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_SHIPPING"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_SHIPPING"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage shipping
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_STAFF"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_STAFF"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_STAFF"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage staff
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_USERS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_USERS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_USERS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage customers
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_PLUGINS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_PLUGINS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_PLUGINS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage plugins
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_APPS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_APPS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_APPS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage apps
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_APPS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_APPS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_APPS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage webhooks
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div />
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Permission Groups / Permission Group Delete Get random permission group error 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Views / Permission Groups / Permission Group Delete Got permissions error 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Views / Permission Groups / Permission Group Delete remove single 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Views / Permission Groups / Permission Group Details default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Editors
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Group name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Editors"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Group name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Group members
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="assign-members"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign members
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                      scope="col"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PermissionGroup-colName-id"
                      scope="col"
                    >
                      <div
                        class="TableCellHeader-labelContainer-id"
                      >
                        <div
                          class="TableCellHeader-label-id"
                        >
                          Name
                        </div>
                      </div>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PermissionGroup-colEmail-id"
                      scope="col"
                    >
                      <div
                        class="TableCellHeader-labelContainer-id"
                      >
                        <div
                          class="TableCellHeader-label-id"
                        >
                          Email Address
                        </div>
                      </div>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id TableCellHeader-notSortable-id"
                      scope="col"
                    >
                      <div
                        class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                      >
                        <div
                          class="TableCellHeader-label-id"
                        >
                          Actions
                        </div>
                      </div>
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id PermissionGroup-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colName-id"
                    >
                      <div
                        class="PermissionGroup-avatar-id"
                      >
                        <img
                          class="PermissionGroup-avatarImage-id"
                          src="[object Object]"
                        />
                      </div>
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        admin
                      </div>
                      <div
                        class="MuiTypography-root-id PermissionGroup-statusText-id MuiTypography-caption-id"
                      >
                        Active
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colEmail-id"
                    >
                      admin@example.com
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        data-test-id="remove-user"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id PermissionGroup-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colName-id"
                    >
                      <div
                        class="PermissionGroup-avatar-id"
                      >
                        <img
                          class="PermissionGroup-avatarImage-id"
                          src="[object Object]"
                        />
                      </div>
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Bryan Rodgers
                      </div>
                      <div
                        class="MuiTypography-root-id PermissionGroup-statusText-id MuiTypography-caption-id"
                      >
                        Active
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colEmail-id"
                    >
                      bryan.rodgers@example.com
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        data-test-id="remove-user"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id PermissionGroup-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colName-id"
                    >
                      <div
                        class="PermissionGroup-avatar-id"
                      >
                        <img
                          class="PermissionGroup-avatarImage-id"
                          src="[object Object]"
                        />
                      </div>
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Joshua Mitchell
                      </div>
                      <div
                        class="MuiTypography-root-id PermissionGroup-statusText-id MuiTypography-caption-id"
                      >
                        Active
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colEmail-id"
                    >
                      joshua.mitchell@example.com
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        data-test-id="remove-user"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id PermissionGroup-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colName-id"
                    >
                      <div
                        class="PermissionGroup-avatar-id"
                      >
                        <img
                          class="PermissionGroup-avatarImage-id"
                          src="[object Object]"
                        />
                      </div>
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Joshua Mitchell
                      </div>
                      <div
                        class="MuiTypography-root-id PermissionGroup-statusText-id MuiTypography-caption-id"
                      >
                        Active
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colEmail-id"
                    >
                      joshua.mitchell@example.com
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        data-test-id="remove-user"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Permissions
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Expand or restrict group's permissions to access certain part of saleor system.
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                    data-test-id="full-access"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="fullAccess"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Group has full access to the store
                  </span>
                </div>
              </div>
            </div>
            <hr
              class="AccountPermissions-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_DISCOUNTS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_DISCOUNTS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_DISCOUNTS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage sales and vouchers
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_MENUS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_MENUS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_MENUS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage navigation
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_ORDERS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_ORDERS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_ORDERS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage orders
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_PAGES"
                        checked=""
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_PAGES"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <svg
                          fill="none"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <rect
                            fill="currentColor"
                            height="23"
                            rx="1.5"
                            width="23"
                            x="0.5"
                            y="0.5"
                          />
                          <path
                            clip-rule="evenodd"
                            d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                            fill="var(--background-paper)"
                            fill-rule="evenodd"
                          />
                        </svg>
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_PAGES"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage pages
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_PRODUCTS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_PRODUCTS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_PRODUCTS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage products
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage product types and attributes
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_SETTINGS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_SETTINGS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_SETTINGS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage settings
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_SHIPPING"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_SHIPPING"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_SHIPPING"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage shipping
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_STAFF"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_STAFF"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_STAFF"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage staff
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_USERS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_USERS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_USERS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage customers
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_PLUGINS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_PLUGINS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_PLUGINS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage plugins
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_APPS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_APPS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_APPS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage apps
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_APPS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_APPS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_APPS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage webhooks
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div />
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Permission Groups / Permission Group Details loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
              style="width:10em"
            >
              ‌
            </span>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Group name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Group name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Group members
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedSecondary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  data-test-id="assign-members"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign members
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                      scope="col"
                    >
                      <span
                        aria-disabled="true"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        tabindex="-1"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            disabled=""
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PermissionGroup-colName-id"
                      scope="col"
                    >
                      <div
                        class="TableCellHeader-labelContainer-id"
                      >
                        <div
                          class="TableCellHeader-label-id"
                        >
                          Name
                        </div>
                      </div>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PermissionGroup-colEmail-id"
                      scope="col"
                    >
                      <div
                        class="TableCellHeader-labelContainer-id"
                      >
                        <div
                          class="TableCellHeader-label-id"
                        >
                          Email Address
                        </div>
                      </div>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id TableCellHeader-notSortable-id"
                      scope="col"
                    >
                      <div
                        class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                      >
                        <div
                          class="TableCellHeader-label-id"
                        >
                          Actions
                        </div>
                      </div>
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id PermissionGroup-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="true"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        tabindex="-1"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            disabled=""
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colName-id"
                    >
                      <div
                        class="PermissionGroup-avatar-id"
                      >
                        <img
                          class="PermissionGroup-avatarImage-id"
                          src="[object Object]"
                        />
                      </div>
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        admin
                      </div>
                      <div
                        class="MuiTypography-root-id PermissionGroup-statusText-id MuiTypography-caption-id"
                      >
                        Active
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colEmail-id"
                    >
                      admin@example.com
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
                        color="primary"
                        data-test-id="remove-user"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id PermissionGroup-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="true"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        tabindex="-1"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            disabled=""
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colName-id"
                    >
                      <div
                        class="PermissionGroup-avatar-id"
                      >
                        <img
                          class="PermissionGroup-avatarImage-id"
                          src="[object Object]"
                        />
                      </div>
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Bryan Rodgers
                      </div>
                      <div
                        class="MuiTypography-root-id PermissionGroup-statusText-id MuiTypography-caption-id"
                      >
                        Active
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colEmail-id"
                    >
                      bryan.rodgers@example.com
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
                        color="primary"
                        data-test-id="remove-user"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id PermissionGroup-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="true"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        tabindex="-1"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            disabled=""
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colName-id"
                    >
                      <div
                        class="PermissionGroup-avatar-id"
                      >
                        <img
                          class="PermissionGroup-avatarImage-id"
                          src="[object Object]"
                        />
                      </div>
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Joshua Mitchell
                      </div>
                      <div
                        class="MuiTypography-root-id PermissionGroup-statusText-id MuiTypography-caption-id"
                      >
                        Active
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colEmail-id"
                    >
                      joshua.mitchell@example.com
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
                        color="primary"
                        data-test-id="remove-user"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id PermissionGroup-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="true"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        tabindex="-1"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            disabled=""
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colName-id"
                    >
                      <div
                        class="PermissionGroup-avatar-id"
                      >
                        <img
                          class="PermissionGroup-avatarImage-id"
                          src="[object Object]"
                        />
                      </div>
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Joshua Mitchell
                      </div>
                      <div
                        class="MuiTypography-root-id PermissionGroup-statusText-id MuiTypography-caption-id"
                      >
                        Active
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colEmail-id"
                    >
                      joshua.mitchell@example.com
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
                        color="primary"
                        data-test-id="remove-user"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Permissions
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Expand or restrict group's permissions to access certain part of saleor system.
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiIconButton-edgeStart-id MuiButtonBase-disabled-id"
                    data-test-id="full-access"
                    tabindex="-1"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="fullAccess"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        disabled=""
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Group has full access to the store
                  </span>
                </div>
              </div>
            </div>
            <hr
              class="AccountPermissions-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
          </div>
        </div>
      </div>
      <div />
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Permission Groups / Permission Group Details no members 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Editors
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Group name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Editors"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Group name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Group members
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="assign-members"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign members
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id PermissionGroup-helperText-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                You haven’t assigned any member to this permission group yet.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Please use Assign Members button to do so.
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Permissions
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Expand or restrict group's permissions to access certain part of saleor system.
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                    data-test-id="full-access"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="fullAccess"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Group has full access to the store
                  </span>
                </div>
              </div>
            </div>
            <hr
              class="AccountPermissions-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_DISCOUNTS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_DISCOUNTS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_DISCOUNTS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage sales and vouchers
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_MENUS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_MENUS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_MENUS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage navigation
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_ORDERS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_ORDERS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_ORDERS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage orders
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_PAGES"
                        checked=""
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_PAGES"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <svg
                          fill="none"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <rect
                            fill="currentColor"
                            height="23"
                            rx="1.5"
                            width="23"
                            x="0.5"
                            y="0.5"
                          />
                          <path
                            clip-rule="evenodd"
                            d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                            fill="var(--background-paper)"
                            fill-rule="evenodd"
                          />
                        </svg>
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_PAGES"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage pages
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_PRODUCTS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_PRODUCTS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_PRODUCTS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage products
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage product types and attributes
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_SETTINGS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_SETTINGS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_SETTINGS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage settings
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_SHIPPING"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_SHIPPING"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_SHIPPING"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage shipping
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_STAFF"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_STAFF"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_STAFF"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage staff
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_USERS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_USERS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_USERS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage customers
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_PLUGINS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_PLUGINS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_PLUGINS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage plugins
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_APPS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_APPS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_APPS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage apps
                  </span>
                </div>
              </div>
              <div
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
                tabindex="0"
              >
                <div
                  class="MuiListItemIcon-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        aria-labelledby="MANAGE_APPS"
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="MANAGE_APPS"
                        tabindex="-1"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
                <div
                  class="MuiListItemText-root-id MuiListItemText-dense-id"
                  id="MANAGE_APPS"
                >
                  <span
                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
                  >
                    Manage webhooks
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div />
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Permission Groups / Permission Group List default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Permission Groups
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-permission-group"
            href="/permission-groups/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              create permission group
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="ResponsiveTable-root-id"
      >
        <a
          class="TableRowLink-link-id"
          href="/permission-groups/R3JvdXA6Mg%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/permission-groups/R3JvdXA6MQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/permission-groups/R3JvdXA6NA%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/permission-groups/R3JvdXA6Mw%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/permission-groups/R3JvdXA6NQ%3D%3D"
        />
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PermissionGroupList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Permission Group Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PermissionGroupList-colMembers-id TableCellHeader-notSortable-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Members
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id PermissionGroupList-colActionsHeader-id"
                scope="col"
              >
                Actions
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="3"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  />
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id PermissionGroupList-link-id MuiTableRow-hover-id"
              data-test-id="id-R3JvdXA6Mg=="
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  Customer Support
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colMembers-id"
              >
                <span
                  data-test-id="members"
                >
                  1
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colActions-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  data-test-id="delete-icon"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id PermissionGroupList-link-id MuiTableRow-hover-id"
              data-test-id="id-R3JvdXA6MQ=="
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  Full Access
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colMembers-id"
              >
                <span
                  data-test-id="members"
                >
                  1
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colActions-id"
              />
            </tr>
            <tr
              class="MuiTableRow-root-id PermissionGroupList-link-id MuiTableRow-hover-id"
              data-test-id="id-R3JvdXA6NA=="
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  Management
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colMembers-id"
              >
                <span
                  data-test-id="members"
                >
                  0
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colActions-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  data-test-id="delete-icon"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id PermissionGroupList-link-id MuiTableRow-hover-id"
              data-test-id="id-R3JvdXA6Mw=="
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  Editors
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colMembers-id"
              >
                <span
                  data-test-id="members"
                >
                  2
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colActions-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  data-test-id="delete-icon"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id PermissionGroupList-link-id MuiTableRow-hover-id"
              data-test-id="id-R3JvdXA6NQ=="
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  Publishers
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colMembers-id"
              >
                <span
                  data-test-id="members"
                >
                  0
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colActions-id"
              >
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  data-test-id="delete-icon"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Permission Groups / Permission Group List loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Permission Groups
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-permission-group"
            href="/permission-groups/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              create permission group
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PermissionGroupList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Permission Group Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PermissionGroupList-colMembers-id TableCellHeader-notSortable-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Members
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id PermissionGroupList-colActionsHeader-id"
                scope="col"
              >
                Actions
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="3"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  />
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id"
              data-test-id="id-undefined"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colName-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colMembers-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colActions-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Permission Groups / Permission Group List no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Permission Groups
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-permission-group"
            href="/permission-groups/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              create permission group
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PermissionGroupList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Permission Group Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PermissionGroupList-colMembers-id TableCellHeader-notSortable-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Members
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id PermissionGroupList-colActionsHeader-id"
                scope="col"
              >
                Actions
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="3"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  />
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
                colspan="3"
              >
                No permission groups found
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Permission Groups / Permission Group Unassign Error Modal Unassign member 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Views / Permission Groups / Permission Group Unassign Member Unassign members 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Views / Permission Groups / Permission Group User Assignment default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Views / Permission Groups / Permission Group User Assignment search loading 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Views / Permission Groups / Permission Group User Assignment submitting loading 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Views / Plugins / Edit secret field password 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Views / Plugins / Edit secret field secret key 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Views / Plugins / Plugin details default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Username or account Details
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Channels
                </span>
              </div>
            </div>
            <div>
              <div
                class="PluginDetailsChannelsCardContent-itemContainer-id"
                data-test-id="channel"
              >
                <div
                  class="MuiCardContent-root-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    channel 1
                  </div>
                </div>
              </div>
              <hr
                class="MuiDivider-root-id"
              />
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Plugin Information and Status
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
              >
                Plugin Name
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Username or account
              </div>
              <div
                class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
              >
                Description
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="MuiTypography-root-id PluginInfo-status-id MuiTypography-body1-id"
              >
                Status
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="active"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Set plugin as active
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Plugins / Plugin details form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Username or account Details
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Channels
                </span>
              </div>
            </div>
            <div>
              <div
                class="PluginDetailsChannelsCardContent-itemContainer-id"
                data-test-id="channel"
              >
                <div
                  class="MuiCardContent-root-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    channel 1
                  </div>
                </div>
              </div>
              <hr
                class="MuiDivider-root-id"
              />
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Plugin Information and Status
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
              >
                Plugin Name
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Username or account
              </div>
              <div
                class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
              >
                Description
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="MuiTypography-root-id PluginInfo-status-id MuiTypography-body1-id"
              >
                Status
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="active"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Set plugin as active
                </span>
              </label>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorError-id"
              >
                Plugin is misconfigured and cannot be activated
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Plugins / Plugin details loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            ... Details
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Channels
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Plugin Information and Status
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
              >
                Plugin Name
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="MuiTypography-root-id PluginInfo-status-id MuiTypography-body1-id"
              >
                Status
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="active"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Set plugin as active
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Plugins / Plugin details not configurable 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Username or account Details
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Channels
                </span>
              </div>
            </div>
            <div>
              <div
                class="PluginDetailsChannelsCardContent-itemContainer-id"
                data-test-id="channel"
              >
                <div
                  class="MuiCardContent-root-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    channel 1
                  </div>
                </div>
              </div>
              <hr
                class="MuiDivider-root-id"
              />
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Plugin Information and Status
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
              >
                Plugin Name
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Username or account
              </div>
              <div
                class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
              >
                Description
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="MuiTypography-root-id PluginInfo-status-id MuiTypography-body1-id"
              >
                Status
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="active"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Set plugin as active
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Plugins / Plugin list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Plugins
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Plugins
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Plugins..."
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
                colspan="5"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
                colspan="2"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Configuration
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id TableCellHeader-notSortable-id"
                colspan="2"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Channel
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id TableCellHeader-notSortable-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  />
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="10"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id PluginsList-link-id MuiTableRow-hover-id"
              data-test-id="plugin"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
                colspan="5"
              >
                Avalara
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
                colspan="2"
              >
                Per channel
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
                colspan="2"
              >
                <div
                  class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Active in 1
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-alignRight-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="24"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                    fill="currentColor"
                  />
                  <path
                    d="M3 21h18"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="1.5"
                  />
                </svg>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id PluginsList-link-id MuiTableRow-hover-id"
              data-test-id="plugin"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
                colspan="5"
              >
                VatLayer
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
                colspan="2"
              >
                Per channel
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
                colspan="2"
              >
                <div
                  class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id"
                  >
                    Active in 1
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-alignRight-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="24"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                    fill="currentColor"
                  />
                  <path
                    d="M3 21h18"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="1.5"
                  />
                </svg>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Plugins / Plugin list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Plugins
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Plugins
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Plugins..."
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
                colspan="5"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
                colspan="2"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Configuration
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id TableCellHeader-notSortable-id"
                colspan="2"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Channel
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id TableCellHeader-notSortable-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  />
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="10"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
                colspan="10"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Plugins / Plugin list no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Plugins
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Plugins
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Plugins..."
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
                colspan="5"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
                colspan="2"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Configuration
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id TableCellHeader-notSortable-id"
                colspan="2"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Channel
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id TableCellHeader-notSortable-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  />
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="10"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
                colspan="10"
              >
                No plugins found
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Product types / Create product type default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Create product type
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductTypeDetails-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Product Type Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Product Type Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <hr
              class="MuiDivider-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="kind"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="kind"
                          type="radio"
                          value="NORMAL"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      <div
                        class="ProductTypeDetails-option-id"
                        data-test-id="product-type-kind-option-NORMAL"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Regular product type
                        </div>
                      </div>
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="kind"
                          type="radio"
                          value="GIFT_CARD"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      <div
                        class="ProductTypeDetails-option-id"
                        data-test-id="product-type-kind-option-GIFT_CARD"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Gift card product type
                          <div
                            class="MuiChip-root-id ProductTypeDetails-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                          >
                            <span
                              class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                            >
                              Preview
                            </span>
                          </div>
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          This product will act as a payment method
                        </div>
                      </div>
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductTypeTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Taxes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-151-label"
                class="SingleAutocompleteSelectField-container-id"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Tax group
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-151-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-151-input"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Tax group
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Shipping
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="isShippingRequired"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Is this product shippable?
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Product types / Create product type form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Create product type
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductTypeDetails-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                  data-shrink="false"
                >
                  Product Type Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Product Type Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Generic form error
                </p>
              </div>
            </div>
            <hr
              class="MuiDivider-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="kind"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="kind"
                          type="radio"
                          value="NORMAL"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      <div
                        class="ProductTypeDetails-option-id"
                        data-test-id="product-type-kind-option-NORMAL"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Regular product type
                        </div>
                      </div>
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="kind"
                          type="radio"
                          value="GIFT_CARD"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      <div
                        class="ProductTypeDetails-option-id"
                        data-test-id="product-type-kind-option-GIFT_CARD"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Gift card product type
                          <div
                            class="MuiChip-root-id ProductTypeDetails-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                          >
                            <span
                              class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                            >
                              Preview
                            </span>
                          </div>
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          This product will act as a payment method
                        </div>
                      </div>
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductTypeTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Taxes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-153-label"
                class="SingleAutocompleteSelectField-container-id"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Tax group
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-153-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-153-input"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Tax group
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Shipping
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="isShippingRequired"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Is this product shippable?
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Product types / Create product type loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
              style="width:10em"
            >
              ‌
            </span>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductTypeDetails-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Product Type Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Product Type Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <hr
              class="MuiDivider-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="kind"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="kind"
                          type="radio"
                          value="NORMAL"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      <div
                        class="ProductTypeDetails-option-id"
                        data-test-id="product-type-kind-option-NORMAL"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Regular product type
                        </div>
                      </div>
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="kind"
                          type="radio"
                          value="GIFT_CARD"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      <div
                        class="ProductTypeDetails-option-id"
                        data-test-id="product-type-kind-option-GIFT_CARD"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Gift card product type
                          <div
                            class="MuiChip-root-id ProductTypeDetails-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                          >
                            <span
                              class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                            >
                              Preview
                            </span>
                          </div>
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          This product will act as a payment method
                        </div>
                      </div>
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductTypeTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Taxes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-152-label"
                class="SingleAutocompleteSelectField-container-id"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Tax group
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-152-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      disabled=""
                      id="downshift-152-input"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Tax group
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Shipping
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      name="isShippingRequired"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Is this product shippable?
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Product types / Product type details default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            E-books
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductTypeDetails-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Product Type Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="E-books"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Product Type Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <hr
              class="MuiDivider-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="kind"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="kind"
                          type="radio"
                          value="NORMAL"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      <div
                        class="ProductTypeDetails-option-id"
                        data-test-id="product-type-kind-option-NORMAL"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Regular product type
                        </div>
                      </div>
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="kind"
                          type="radio"
                          value="GIFT_CARD"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      <div
                        class="ProductTypeDetails-option-id"
                        data-test-id="product-type-kind-option-GIFT_CARD"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Gift card product type
                          <div
                            class="MuiChip-root-id ProductTypeDetails-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                          >
                            <span
                              class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                            >
                              Preview
                            </span>
                          </div>
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          This product will act as a payment method
                        </div>
                      </div>
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductTypeTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Taxes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-154-label"
                class="SingleAutocompleteSelectField-container-id"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Tax group
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-154-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-154-input"
                      type="text"
                      value="PH405458"
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Tax group
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="product-attributes"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Product Attributes
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="assign-products-attributes"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign attribute
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <a
                class="TableRowLink-link-id"
                href="/attributes/UHJvZHVjdEF0dHJpYnV0ZTo5"
              />
              <a
                class="TableRowLink-link-id"
                href="/attributes/UHJvZHVjdEF0dHJpYnV0ZToxMQ%3D%3D"
              />
              <a
                class="TableRowLink-link-id"
                href="/attributes/UHJvZHVjdEF0dHJpYnV0ZToxMA%3D%3D"
              />
              <table
                class="MuiTable-root-id"
              >
                <colgroup>
                  <col
                    class="ProductTypeAttributes-colGrab-id"
                  />
                  <col />
                  <col
                    class="ProductTypeAttributes-colName-id"
                  />
                  <col
                    class="ProductTypeAttributes-colSlug-id"
                  />
                  <col
                    class="ProductTypeAttributes-colAction-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id TableHead-dragRows-id MuiTableCell-paddingCheckbox-id"
                      scope="col"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeAttributes-colName-id"
                      scope="col"
                    >
                      Attribute name
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeAttributes-colName-id"
                      scope="col"
                    >
                      Slug
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id ProductTypeAttributes-link-id MuiTableRow-hover-id"
                    data-test-id="idUHJvZHVjdEF0dHJpYnV0ZTo5"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
                      data-test-id="name"
                    >
                      Author
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                      data-test-id="slug"
                    >
                      author
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colAction-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        data-test-id="delete-icon"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductTypeAttributes-link-id MuiTableRow-hover-id"
                    data-test-id="idUHJvZHVjdEF0dHJpYnV0ZToxMQ=="
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
                      data-test-id="name"
                    >
                      Language
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                      data-test-id="slug"
                    >
                      language
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colAction-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        data-test-id="delete-icon"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductTypeAttributes-link-id MuiTableRow-hover-id"
                    data-test-id="idUHJvZHVjdEF0dHJpYnV0ZToxMA=="
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
                      data-test-id="name"
                    >
                      Publisher
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                      data-test-id="slug"
                    >
                      publisher
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colAction-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        data-test-id="delete-icon"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              class="MuiSwitch-root-id"
            >
              <span
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <input
                    class="PrivateSwitchBase-input-id MuiSwitch-input-id"
                    name="hasVariants"
                    type="checkbox"
                  />
                  <span
                    class="MuiSwitch-thumb-id"
                  />
                </span>
              </span>
              <span
                class="MuiSwitch-track-id"
              />
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              <div>
                <span
                  class="ControlledSwitch-labelText-id"
                >
                  Product type uses Variant Attributes
                </span>
                <div />
              </div>
            </span>
          </label>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.id"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          100023123
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Shipping
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="isShippingRequired"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Is this product shippable?
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Product types / Product type details form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            E-books
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductTypeDetails-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Product Type Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="E-books"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Product Type Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Generic form error
                </p>
              </div>
            </div>
            <hr
              class="MuiDivider-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="kind"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="kind"
                          type="radio"
                          value="NORMAL"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      <div
                        class="ProductTypeDetails-option-id"
                        data-test-id="product-type-kind-option-NORMAL"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Regular product type
                        </div>
                      </div>
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="kind"
                          type="radio"
                          value="GIFT_CARD"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      <div
                        class="ProductTypeDetails-option-id"
                        data-test-id="product-type-kind-option-GIFT_CARD"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Gift card product type
                          <div
                            class="MuiChip-root-id ProductTypeDetails-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                          >
                            <span
                              class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                            >
                              Preview
                            </span>
                          </div>
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          This product will act as a payment method
                        </div>
                      </div>
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductTypeTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Taxes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-157-label"
                class="SingleAutocompleteSelectField-container-id"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Tax group
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-157-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-157-input"
                      type="text"
                      value="PH405458"
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Tax group
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="product-attributes"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Product Attributes
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="assign-products-attributes"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign attribute
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <a
                class="TableRowLink-link-id"
                href="/attributes/UHJvZHVjdEF0dHJpYnV0ZTo5"
              />
              <a
                class="TableRowLink-link-id"
                href="/attributes/UHJvZHVjdEF0dHJpYnV0ZToxMQ%3D%3D"
              />
              <a
                class="TableRowLink-link-id"
                href="/attributes/UHJvZHVjdEF0dHJpYnV0ZToxMA%3D%3D"
              />
              <table
                class="MuiTable-root-id"
              >
                <colgroup>
                  <col
                    class="ProductTypeAttributes-colGrab-id"
                  />
                  <col />
                  <col
                    class="ProductTypeAttributes-colName-id"
                  />
                  <col
                    class="ProductTypeAttributes-colSlug-id"
                  />
                  <col
                    class="ProductTypeAttributes-colAction-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id TableHead-dragRows-id MuiTableCell-paddingCheckbox-id"
                      scope="col"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeAttributes-colName-id"
                      scope="col"
                    >
                      Attribute name
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeAttributes-colName-id"
                      scope="col"
                    >
                      Slug
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id ProductTypeAttributes-link-id MuiTableRow-hover-id"
                    data-test-id="idUHJvZHVjdEF0dHJpYnV0ZTo5"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
                      data-test-id="name"
                    >
                      Author
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                      data-test-id="slug"
                    >
                      author
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colAction-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        data-test-id="delete-icon"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductTypeAttributes-link-id MuiTableRow-hover-id"
                    data-test-id="idUHJvZHVjdEF0dHJpYnV0ZToxMQ=="
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
                      data-test-id="name"
                    >
                      Language
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                      data-test-id="slug"
                    >
                      language
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colAction-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        data-test-id="delete-icon"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductTypeAttributes-link-id MuiTableRow-hover-id"
                    data-test-id="idUHJvZHVjdEF0dHJpYnV0ZToxMA=="
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
                      data-test-id="name"
                    >
                      Publisher
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                      data-test-id="slug"
                    >
                      publisher
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colAction-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        data-test-id="delete-icon"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              class="MuiSwitch-root-id"
            >
              <span
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <input
                    class="PrivateSwitchBase-input-id MuiSwitch-input-id"
                    name="hasVariants"
                    type="checkbox"
                  />
                  <span
                    class="MuiSwitch-thumb-id"
                  />
                </span>
              </span>
              <span
                class="MuiSwitch-track-id"
              />
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              <div>
                <span
                  class="ControlledSwitch-labelText-id"
                >
                  Product type uses Variant Attributes
                </span>
                <div />
              </div>
            </span>
          </label>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.id"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          100023123
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Shipping
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="isShippingRequired"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Is this product shippable?
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Product types / Product type details loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
              style="width:10em"
            >
              ‌
            </span>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductTypeDetails-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Product Type Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Product Type Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <hr
              class="MuiDivider-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="kind"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="kind"
                          type="radio"
                          value="NORMAL"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      <div
                        class="ProductTypeDetails-option-id"
                        data-test-id="product-type-kind-option-NORMAL"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Regular product type
                        </div>
                      </div>
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="kind"
                          type="radio"
                          value="GIFT_CARD"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      <div
                        class="ProductTypeDetails-option-id"
                        data-test-id="product-type-kind-option-GIFT_CARD"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Gift card product type
                          <div
                            class="MuiChip-root-id ProductTypeDetails-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                          >
                            <span
                              class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                            >
                              Preview
                            </span>
                          </div>
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          This product will act as a payment method
                        </div>
                      </div>
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductTypeTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Taxes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-155-label"
                class="SingleAutocompleteSelectField-container-id"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Tax group
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-155-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      disabled=""
                      id="downshift-155-input"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Tax group
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="product-attributes"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Product Attributes
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  data-test-id="assign-products-attributes"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign attribute
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <colgroup>
                  <col
                    class="ProductTypeAttributes-colGrab-id"
                  />
                  <col />
                  <col
                    class="ProductTypeAttributes-colName-id"
                  />
                  <col
                    class="ProductTypeAttributes-colSlug-id"
                  />
                  <col
                    class="ProductTypeAttributes-colAction-id"
                  />
                </colgroup>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id"
                    data-test-id="idundefined"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="true"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        tabindex="-1"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            disabled=""
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
                      data-test-id="name"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                      data-test-id="slug"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colAction-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
                        data-test-id="delete-icon"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <label
            class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
          >
            <span
              class="MuiSwitch-root-id"
            >
              <span
                aria-disabled="true"
                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id PrivateSwitchBase-disabled-id MuiSwitch-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                tabindex="-1"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <input
                    class="PrivateSwitchBase-input-id MuiSwitch-input-id"
                    disabled=""
                    name="hasVariants"
                    type="checkbox"
                  />
                  <span
                    class="MuiSwitch-thumb-id"
                  />
                </span>
              </span>
              <span
                class="MuiSwitch-track-id"
              />
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
            >
              <div>
                <span
                  class="ControlledSwitch-labelText-id"
                >
                  Product type uses Variant Attributes
                </span>
                <div />
              </div>
            </span>
          </label>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Shipping
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      name="isShippingRequired"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Is this product shippable?
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Product types / Product type details no attributes 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            E-books
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductTypeDetails-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Product Type Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="E-books"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Product Type Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <hr
              class="MuiDivider-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="kind"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="kind"
                          type="radio"
                          value="NORMAL"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      <div
                        class="ProductTypeDetails-option-id"
                        data-test-id="product-type-kind-option-NORMAL"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Regular product type
                        </div>
                      </div>
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="kind"
                          type="radio"
                          value="GIFT_CARD"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      <div
                        class="ProductTypeDetails-option-id"
                        data-test-id="product-type-kind-option-GIFT_CARD"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Gift card product type
                          <div
                            class="MuiChip-root-id ProductTypeDetails-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                          >
                            <span
                              class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                            >
                              Preview
                            </span>
                          </div>
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          This product will act as a payment method
                        </div>
                      </div>
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductTypeTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Taxes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-156-label"
                class="SingleAutocompleteSelectField-container-id"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Tax group
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-156-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-156-input"
                      type="text"
                      value="PH405458"
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Tax group
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="product-attributes"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Product Attributes
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="assign-products-attributes"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign attribute
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <colgroup>
                  <col
                    class="ProductTypeAttributes-colGrab-id"
                  />
                  <col />
                  <col
                    class="ProductTypeAttributes-colName-id"
                  />
                  <col
                    class="ProductTypeAttributes-colSlug-id"
                  />
                  <col
                    class="ProductTypeAttributes-colAction-id"
                  />
                </colgroup>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                      colspan="5"
                    >
                      No attributes found
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              class="MuiSwitch-root-id"
            >
              <span
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <input
                    class="PrivateSwitchBase-input-id MuiSwitch-input-id"
                    name="hasVariants"
                    type="checkbox"
                  />
                  <span
                    class="MuiSwitch-thumb-id"
                  />
                </span>
              </span>
              <span
                class="MuiSwitch-track-id"
              />
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              <div>
                <span
                  class="ControlledSwitch-labelText-id"
                >
                  Product type uses Variant Attributes
                </span>
                <div />
              </div>
            </span>
          </label>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.id"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          100023123
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Shipping
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="isShippingRequired"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Is this product shippable?
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Product types / Product types list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Product Types
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="add-product-type"
            href="/product-types/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              create product type
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Product Types
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Product Type"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <a
          class="TableRowLink-link-id"
          href="/product-types/UHJvZHVjdFR5cGU6NA%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/product-types/UHJvZHVjdFR5cGU6NQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/product-types/UHJvZHVjdFR5cGU6Mg%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/product-types/UHJvZHVjdFR5cGU6Mw%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/product-types/UHJvZHVjdFR5cGU6MQ%3D%3D"
        />
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductTypeList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Type Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductTypeList-colType-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Type
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeList-colTax-id"
                scope="col"
              >
                Tax
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  />
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id ProductTypeList-link-id MuiTableRow-hover-id"
              data-test-id="id-UHJvZHVjdFR5cGU6NA=="
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  Candy
                </span>
                <div
                  class="MuiTypography-root-id MuiTypography-caption-id"
                >
                  Configurable
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colType-id"
              >
                Physical
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colTax-id"
              >
                PB100000
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id ProductTypeList-link-id MuiTableRow-hover-id"
              data-test-id="id-UHJvZHVjdFR5cGU6NQ=="
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  E-books
                </span>
                <div
                  class="MuiTypography-root-id MuiTypography-caption-id"
                >
                  Simple product
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colType-id"
              >
                Digital
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colTax-id"
              >
                PH403682
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id ProductTypeList-link-id MuiTableRow-hover-id"
              data-test-id="id-UHJvZHVjdFR5cGU6Mg=="
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  Mugs
                </span>
                <div
                  class="MuiTypography-root-id MuiTypography-caption-id"
                >
                  Simple product
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colType-id"
              >
                Physical
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colTax-id"
              >
                PC077426
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id ProductTypeList-link-id MuiTableRow-hover-id"
              data-test-id="id-UHJvZHVjdFR5cGU6Mw=="
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  Coffee
                </span>
                <div
                  class="MuiTypography-root-id MuiTypography-caption-id"
                >
                  Configurable
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colType-id"
              >
                Physical
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colTax-id"
              >
                PB100000
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id ProductTypeList-link-id MuiTableRow-hover-id"
              data-test-id="id-UHJvZHVjdFR5cGU6MQ=="
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
              >
                <span
                  data-test-id="name"
                >
                  T-Shirt
                </span>
                <div
                  class="MuiTypography-root-id MuiTypography-caption-id"
                >
                  Configurable
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colType-id"
              >
                Physical
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colTax-id"
              >
                PH403970
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Product types / Product types list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Product Types
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="add-product-type"
            href="/product-types/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              create product type
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Product Types
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Product Type"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductTypeList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Type Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductTypeList-colType-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Type
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeList-colTax-id"
                scope="col"
              >
                Tax
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  />
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id"
              data-test-id="id-undefined"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colType-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colTax-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Product types / Product types list no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Product Types
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="add-product-type"
            href="/product-types/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              create product type
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Product Types
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Product Type"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductTypeList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Type Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductTypeList-colType-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Type
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeList-colTax-id"
                scope="col"
              >
                Tax
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  />
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
                colspan="4"
              >
                No product types found
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Products / Create multiple variants / prices and SKUs apply to all 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            Price
          </span>
        </div>
      </div>
      <div
        class="MuiCardContent-root-id"
      >
        <div
          class="MuiFormGroup-root-id ProductVariantCreatorPrices-container-id"
          role="radiogroup"
        >
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  type="radio"
                  value="all"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <circle
                    cx="12"
                    cy="12"
                    fill="var(--background-paper)"
                    r="11"
                    stroke="currentColor"
                    stroke-width="2"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Apply single price to all SKUs
            </span>
          </label>
          <div
            class="FormSpacer-spacer-id"
          />
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  checked=""
                  class="PrivateSwitchBase-input-id"
                  type="radio"
                  value="attribute"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <circle
                    cx="12"
                    cy="12"
                    fill="currentColor"
                    r="12"
                  />
                  <circle
                    cx="12"
                    cy="12"
                    fill="var(--background-paper)"
                    r="5"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Apply unique prices by attribute to each SKU
            </span>
          </label>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="Grid-root-id Grid-uniform-id"
          >
            <div
              class="ProductVariantCreatorPrices-label-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Choose attribute
              </div>
            </div>
            <div>
              <div
                class="MuiFormControl-root-id SingleSelectField-formControl-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Attribute
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <div
                    aria-haspopup="listbox"
                    class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id"
                    role="button"
                    tabindex="0"
                  >
                    Box Size
                  </div>
                  <input
                    aria-hidden="true"
                    class="MuiSelect-nativeInput-id"
                    tabindex="-1"
                    value="UHJvZHVjdEF0dHJpYnV0ZTo2"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:143px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <hr
            class="Hr-root-id ProductVariantCreatorPrices-hrAttribute-id"
          />
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="ProductVariantCreatorPrices-attrInputsContainer-id"
          >
            <div
              class="ProductVariantCreatorPrices-label-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                100g
              </div>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorPrices-channelName-id MuiTypography-caption-id"
              >
                Channel1
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Price
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="price"
                    step="0.01"
                    type="number"
                    value="1.2"
                  />
                  <div
                    class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      USD
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Price
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorPrices-channelName-id MuiTypography-caption-id"
              >
                Channel2
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Price
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="price"
                    step="0.01"
                    type="number"
                    value="2.2"
                  />
                  <div
                    class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      USD
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Price
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorPrices-channelName-id MuiTypography-caption-id"
              >
                Channel3
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Price
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="price"
                    step="0.01"
                    type="number"
                    value="30.1"
                  />
                  <div
                    class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      USD
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Price
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <hr
            class="Hr-root-id ProductVariantCreatorPrices-hrAttribute-id"
          />
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="ProductVariantCreatorPrices-attrInputsContainer-id"
          >
            <div
              class="ProductVariantCreatorPrices-label-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                500g
              </div>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorPrices-channelName-id MuiTypography-caption-id"
              >
                Channel1
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Price
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="price"
                    step="0.01"
                    type="number"
                    value="1.2"
                  />
                  <div
                    class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      USD
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Price
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorPrices-channelName-id MuiTypography-caption-id"
              >
                Channel2
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Price
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="price"
                    step="0.01"
                    type="number"
                    value="2.2"
                  />
                  <div
                    class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      USD
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Price
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorPrices-channelName-id MuiTypography-caption-id"
              >
                Channel3
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Price
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="price"
                    step="0.01"
                    type="number"
                    value="30.1"
                  />
                  <div
                    class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      USD
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Price
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  type="radio"
                  value="skip"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <circle
                    cx="12"
                    cy="12"
                    fill="var(--background-paper)"
                    r="11"
                    stroke="currentColor"
                    stroke-width="2"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Skip pricing for now
            </span>
          </label>
        </div>
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            Stock and Warehousing
          </span>
        </div>
      </div>
      <div
        class="MuiCardContent-root-id"
      >
        <div
          class="MuiTypography-root-id ProductVariantCreatorStock-warehouseHeader-id MuiTypography-h5-id"
        >
          Warehouses
        </div>
        <div
          class="MuiTypography-root-id ProductVariantCreatorStock-warehouseSubheader-id MuiTypography-body1-id"
        >
          Based on your selections we will create 5 products. Use this step to customize price and stocks for your new products
        </div>
        <div
          class="ProductVariantCreatorStock-warehouseContainer-id"
        >
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  checked=""
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  name="warehouse:V2FyZWhvdXNlOmEzMThmMGZlLTcwMmYtNDNjYy1hYmFjLWZmZmMzN2Y3ZTliYw=="
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <svg
                    fill="none"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <rect
                      fill="currentColor"
                      height="23"
                      rx="1.5"
                      width="23"
                      x="0.5"
                      y="0.5"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                      fill="var(--background-paper)"
                      fill-rule="evenodd"
                    />
                  </svg>
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              C our wares
            </span>
          </label>
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  checked=""
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  name="warehouse:V2FyZWhvdXNlOjJmN2UyOTlmLWEwMzMtNDhjZS1iYmM5LTFkZDM4NjU2ZjMwYw=="
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <svg
                    fill="none"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <rect
                      fill="currentColor"
                      height="23"
                      rx="1.5"
                      width="23"
                      x="0.5"
                      y="0.5"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                      fill="var(--background-paper)"
                      fill-rule="evenodd"
                    />
                  </svg>
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Be stocked
            </span>
          </label>
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  name="warehouse:V2FyZWhvdXNlOmM0ZmQ3Nzc0LWZlMjYtNDE1YS1hYjk1LWFlYTFjMjI0NTgwNg=="
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <rect
                    fill="transparent"
                    height="22"
                    rx="2"
                    ry="2"
                    stroke="currentColor"
                    stroke-linejoin="round"
                    stroke-width="2"
                    width="22"
                    x="1"
                    y="1"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              A Warehouse
            </span>
          </label>
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  checked=""
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  name="warehouse:V2FyZWhvdXNlOmNlMmNiZDhhLWRkYmQtNDhiNS1hM2UxLTNmZGVkZGI5MWZkMg=="
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <svg
                    fill="none"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <rect
                      fill="currentColor"
                      height="23"
                      rx="1.5"
                      width="23"
                      x="0.5"
                      y="0.5"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                      fill="var(--background-paper)"
                      fill-rule="evenodd"
                    />
                  </svg>
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Darkwares
            </span>
          </label>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <hr
          class="Hr-root-id"
        />
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiTypography-root-id ProductVariantCreatorStock-stockHeader-id MuiTypography-h5-id"
        >
          Stock
        </div>
        <div
          class="MuiFormGroup-root-id"
          role="radiogroup"
        >
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  checked=""
                  class="PrivateSwitchBase-input-id"
                  type="radio"
                  value="all"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <circle
                    cx="12"
                    cy="12"
                    fill="currentColor"
                    r="12"
                  />
                  <circle
                    cx="12"
                    cy="12"
                    fill="var(--background-paper)"
                    r="5"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Apply single stock to all SKUs
            </span>
          </label>
          <div
            class="ProductVariantCreatorStock-stockContainer-id"
          >
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorStock-warehouseName-id MuiTypography-body1-id"
              >
                C our wares
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                data-test-id="stock-input"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Stock
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    min="0"
                    type="number"
                    value="6"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Stock
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorStock-warehouseName-id MuiTypography-body1-id"
              >
                Be stocked
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                data-test-id="stock-input"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Stock
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    min="0"
                    type="number"
                    value="9"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Stock
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorStock-warehouseName-id MuiTypography-body1-id"
              >
                Darkwares
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                data-test-id="stock-input"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Stock
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    min="0"
                    type="number"
                    value="12"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Stock
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  type="radio"
                  value="attribute"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <circle
                    cx="12"
                    cy="12"
                    fill="var(--background-paper)"
                    r="11"
                    stroke="currentColor"
                    stroke-width="2"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Apply unique stock by attribute to each SKU
            </span>
          </label>
          <div
            class="FormSpacer-spacer-id"
          />
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  type="radio"
                  value="skip"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <circle
                    cx="12"
                    cy="12"
                    fill="var(--background-paper)"
                    r="11"
                    stroke="currentColor"
                    stroke-width="2"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Skip stock for now
            </span>
          </label>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Products / Create multiple variants / prices and SKUs apply to all when one warehouse 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            Price
          </span>
        </div>
      </div>
      <div
        class="MuiCardContent-root-id"
      >
        <div
          class="MuiFormGroup-root-id ProductVariantCreatorPrices-container-id"
          role="radiogroup"
        >
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  type="radio"
                  value="all"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <circle
                    cx="12"
                    cy="12"
                    fill="var(--background-paper)"
                    r="11"
                    stroke="currentColor"
                    stroke-width="2"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Apply single price to all SKUs
            </span>
          </label>
          <div
            class="FormSpacer-spacer-id"
          />
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  checked=""
                  class="PrivateSwitchBase-input-id"
                  type="radio"
                  value="attribute"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <circle
                    cx="12"
                    cy="12"
                    fill="currentColor"
                    r="12"
                  />
                  <circle
                    cx="12"
                    cy="12"
                    fill="var(--background-paper)"
                    r="5"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Apply unique prices by attribute to each SKU
            </span>
          </label>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="Grid-root-id Grid-uniform-id"
          >
            <div
              class="ProductVariantCreatorPrices-label-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Choose attribute
              </div>
            </div>
            <div>
              <div
                class="MuiFormControl-root-id SingleSelectField-formControl-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Attribute
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <div
                    aria-haspopup="listbox"
                    class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id"
                    role="button"
                    tabindex="0"
                  >
                    Box Size
                  </div>
                  <input
                    aria-hidden="true"
                    class="MuiSelect-nativeInput-id"
                    tabindex="-1"
                    value="UHJvZHVjdEF0dHJpYnV0ZTo2"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:143px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <hr
            class="Hr-root-id ProductVariantCreatorPrices-hrAttribute-id"
          />
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="ProductVariantCreatorPrices-attrInputsContainer-id"
          >
            <div
              class="ProductVariantCreatorPrices-label-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                100g
              </div>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorPrices-channelName-id MuiTypography-caption-id"
              >
                Channel1
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Price
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="price"
                    step="0.01"
                    type="number"
                    value="1.2"
                  />
                  <div
                    class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      USD
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Price
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorPrices-channelName-id MuiTypography-caption-id"
              >
                Channel2
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Price
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="price"
                    step="0.01"
                    type="number"
                    value="2.2"
                  />
                  <div
                    class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      USD
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Price
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorPrices-channelName-id MuiTypography-caption-id"
              >
                Channel3
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Price
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="price"
                    step="0.01"
                    type="number"
                    value="30.1"
                  />
                  <div
                    class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      USD
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Price
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <hr
            class="Hr-root-id ProductVariantCreatorPrices-hrAttribute-id"
          />
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="ProductVariantCreatorPrices-attrInputsContainer-id"
          >
            <div
              class="ProductVariantCreatorPrices-label-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                500g
              </div>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorPrices-channelName-id MuiTypography-caption-id"
              >
                Channel1
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Price
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="price"
                    step="0.01"
                    type="number"
                    value="1.2"
                  />
                  <div
                    class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      USD
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Price
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorPrices-channelName-id MuiTypography-caption-id"
              >
                Channel2
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Price
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="price"
                    step="0.01"
                    type="number"
                    value="2.2"
                  />
                  <div
                    class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      USD
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Price
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorPrices-channelName-id MuiTypography-caption-id"
              >
                Channel3
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Price
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="price"
                    step="0.01"
                    type="number"
                    value="30.1"
                  />
                  <div
                    class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      USD
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Price
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  type="radio"
                  value="skip"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <circle
                    cx="12"
                    cy="12"
                    fill="var(--background-paper)"
                    r="11"
                    stroke="currentColor"
                    stroke-width="2"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Skip pricing for now
            </span>
          </label>
        </div>
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            Stock and Warehousing
          </span>
        </div>
      </div>
      <div
        class="MuiCardContent-root-id"
      >
        <div
          class="MuiTypography-root-id ProductVariantCreatorStock-stockHeader-id MuiTypography-h5-id"
        >
          Stock
        </div>
        <div
          class="MuiFormGroup-root-id"
          role="radiogroup"
        >
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  checked=""
                  class="PrivateSwitchBase-input-id"
                  type="radio"
                  value="all"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <circle
                    cx="12"
                    cy="12"
                    fill="currentColor"
                    r="12"
                  />
                  <circle
                    cx="12"
                    cy="12"
                    fill="var(--background-paper)"
                    r="5"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Apply single stock to all SKUs
            </span>
          </label>
          <div
            class="ProductVariantCreatorStock-stockContainer-id"
          >
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorStock-warehouseName-id MuiTypography-body1-id"
              >
                C our wares
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                data-test-id="stock-input"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Stock
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    min="0"
                    type="number"
                    value="6"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Stock
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  type="radio"
                  value="attribute"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <circle
                    cx="12"
                    cy="12"
                    fill="var(--background-paper)"
                    r="11"
                    stroke="currentColor"
                    stroke-width="2"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Apply unique stock by attribute to each SKU
            </span>
          </label>
          <div
            class="FormSpacer-spacer-id"
          />
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  type="radio"
                  value="skip"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <circle
                    cx="12"
                    cy="12"
                    fill="var(--background-paper)"
                    r="11"
                    stroke="currentColor"
                    stroke-width="2"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Skip stock for now
            </span>
          </label>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Products / Create multiple variants / prices and SKUs apply to attribute 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            Price
          </span>
        </div>
      </div>
      <div
        class="MuiCardContent-root-id"
      >
        <div
          class="MuiFormGroup-root-id ProductVariantCreatorPrices-container-id"
          role="radiogroup"
        >
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  type="radio"
                  value="all"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <circle
                    cx="12"
                    cy="12"
                    fill="var(--background-paper)"
                    r="11"
                    stroke="currentColor"
                    stroke-width="2"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Apply single price to all SKUs
            </span>
          </label>
          <div
            class="FormSpacer-spacer-id"
          />
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  checked=""
                  class="PrivateSwitchBase-input-id"
                  type="radio"
                  value="attribute"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <circle
                    cx="12"
                    cy="12"
                    fill="currentColor"
                    r="12"
                  />
                  <circle
                    cx="12"
                    cy="12"
                    fill="var(--background-paper)"
                    r="5"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Apply unique prices by attribute to each SKU
            </span>
          </label>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="Grid-root-id Grid-uniform-id"
          >
            <div
              class="ProductVariantCreatorPrices-label-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Choose attribute
              </div>
            </div>
            <div>
              <div
                class="MuiFormControl-root-id SingleSelectField-formControl-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Attribute
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <div
                    aria-haspopup="listbox"
                    class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id"
                    role="button"
                    tabindex="0"
                  >
                    Box Size
                  </div>
                  <input
                    aria-hidden="true"
                    class="MuiSelect-nativeInput-id"
                    tabindex="-1"
                    value="UHJvZHVjdEF0dHJpYnV0ZTo2"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:143px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <hr
            class="Hr-root-id ProductVariantCreatorPrices-hrAttribute-id"
          />
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="ProductVariantCreatorPrices-attrInputsContainer-id"
          >
            <div
              class="ProductVariantCreatorPrices-label-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                100g
              </div>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorPrices-channelName-id MuiTypography-caption-id"
              >
                Channel1
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Price
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="price"
                    step="0.01"
                    type="number"
                    value="1.2"
                  />
                  <div
                    class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      USD
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Price
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorPrices-channelName-id MuiTypography-caption-id"
              >
                Channel2
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Price
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="price"
                    step="0.01"
                    type="number"
                    value="2.2"
                  />
                  <div
                    class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      USD
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Price
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorPrices-channelName-id MuiTypography-caption-id"
              >
                Channel3
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Price
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="price"
                    step="0.01"
                    type="number"
                    value="30.1"
                  />
                  <div
                    class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      USD
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Price
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <hr
            class="Hr-root-id ProductVariantCreatorPrices-hrAttribute-id"
          />
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="ProductVariantCreatorPrices-attrInputsContainer-id"
          >
            <div
              class="ProductVariantCreatorPrices-label-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                500g
              </div>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorPrices-channelName-id MuiTypography-caption-id"
              >
                Channel1
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Price
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="price"
                    step="0.01"
                    type="number"
                    value="1.2"
                  />
                  <div
                    class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      USD
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Price
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorPrices-channelName-id MuiTypography-caption-id"
              >
                Channel2
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Price
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="price"
                    step="0.01"
                    type="number"
                    value="2.2"
                  />
                  <div
                    class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      USD
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Price
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorPrices-channelName-id MuiTypography-caption-id"
              >
                Channel3
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Price
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="price"
                    step="0.01"
                    type="number"
                    value="30.1"
                  />
                  <div
                    class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      USD
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Price
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  type="radio"
                  value="skip"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <circle
                    cx="12"
                    cy="12"
                    fill="var(--background-paper)"
                    r="11"
                    stroke="currentColor"
                    stroke-width="2"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Skip pricing for now
            </span>
          </label>
        </div>
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            Stock and Warehousing
          </span>
        </div>
      </div>
      <div
        class="MuiCardContent-root-id"
      >
        <div
          class="MuiTypography-root-id ProductVariantCreatorStock-warehouseHeader-id MuiTypography-h5-id"
        >
          Warehouses
        </div>
        <div
          class="MuiTypography-root-id ProductVariantCreatorStock-warehouseSubheader-id MuiTypography-body1-id"
        >
          Based on your selections we will create 5 products. Use this step to customize price and stocks for your new products
        </div>
        <div
          class="ProductVariantCreatorStock-warehouseContainer-id"
        >
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  checked=""
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  name="warehouse:V2FyZWhvdXNlOmEzMThmMGZlLTcwMmYtNDNjYy1hYmFjLWZmZmMzN2Y3ZTliYw=="
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <svg
                    fill="none"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <rect
                      fill="currentColor"
                      height="23"
                      rx="1.5"
                      width="23"
                      x="0.5"
                      y="0.5"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                      fill="var(--background-paper)"
                      fill-rule="evenodd"
                    />
                  </svg>
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              C our wares
            </span>
          </label>
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  checked=""
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  name="warehouse:V2FyZWhvdXNlOjJmN2UyOTlmLWEwMzMtNDhjZS1iYmM5LTFkZDM4NjU2ZjMwYw=="
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <svg
                    fill="none"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <rect
                      fill="currentColor"
                      height="23"
                      rx="1.5"
                      width="23"
                      x="0.5"
                      y="0.5"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                      fill="var(--background-paper)"
                      fill-rule="evenodd"
                    />
                  </svg>
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Be stocked
            </span>
          </label>
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  name="warehouse:V2FyZWhvdXNlOmM0ZmQ3Nzc0LWZlMjYtNDE1YS1hYjk1LWFlYTFjMjI0NTgwNg=="
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <rect
                    fill="transparent"
                    height="22"
                    rx="2"
                    ry="2"
                    stroke="currentColor"
                    stroke-linejoin="round"
                    stroke-width="2"
                    width="22"
                    x="1"
                    y="1"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              A Warehouse
            </span>
          </label>
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  checked=""
                  class="PrivateSwitchBase-input-id"
                  data-indeterminate="false"
                  name="warehouse:V2FyZWhvdXNlOmNlMmNiZDhhLWRkYmQtNDhiNS1hM2UxLTNmZGVkZGI5MWZkMg=="
                  type="checkbox"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <svg
                    fill="none"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <rect
                      fill="currentColor"
                      height="23"
                      rx="1.5"
                      width="23"
                      x="0.5"
                      y="0.5"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                      fill="var(--background-paper)"
                      fill-rule="evenodd"
                    />
                  </svg>
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Darkwares
            </span>
          </label>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <hr
          class="Hr-root-id"
        />
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiTypography-root-id ProductVariantCreatorStock-stockHeader-id MuiTypography-h5-id"
        >
          Stock
        </div>
        <div
          class="MuiFormGroup-root-id"
          role="radiogroup"
        >
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  type="radio"
                  value="all"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <circle
                    cx="12"
                    cy="12"
                    fill="var(--background-paper)"
                    r="11"
                    stroke="currentColor"
                    stroke-width="2"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Apply single stock to all SKUs
            </span>
          </label>
          <div
            class="FormSpacer-spacer-id"
          />
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  checked=""
                  class="PrivateSwitchBase-input-id"
                  type="radio"
                  value="attribute"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <circle
                    cx="12"
                    cy="12"
                    fill="currentColor"
                    r="12"
                  />
                  <circle
                    cx="12"
                    cy="12"
                    fill="var(--background-paper)"
                    r="5"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Apply unique stock by attribute to each SKU
            </span>
          </label>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiFormControl-root-id SingleSelectField-formControl-id ProductVariantCreatorStock-shortInput-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
              data-shrink="true"
            >
              Select Attribute
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <div
                aria-haspopup="listbox"
                class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id"
                role="button"
                tabindex="0"
              >
                Box Size
              </div>
              <input
                aria-hidden="true"
                class="MuiSelect-nativeInput-id"
                tabindex="-1"
                value="UHJvZHVjdEF0dHJpYnV0ZTo2"
              />
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <path
                  d="M7 10l5 5 5-5z"
                />
              </svg>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:143px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
          <hr
            class="Hr-root-id ProductVariantCreatorStock-hrAttribute-id"
          />
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="ProductVariantCreatorStock-attributeStockScroll-id"
          >
            <div
              class="ProductVariantCreatorStock-attributeStockContainer-id ProductVariantCreatorStock-attributeStockContainer-id"
            >
              <div />
              <div
                class="MuiTypography-root-id ProductVariantCreatorStock-warehouseName-id MuiTypography-body1-id"
              >
                C our wares
              </div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorStock-warehouseName-id MuiTypography-body1-id"
              >
                Be stocked
              </div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorStock-warehouseName-id MuiTypography-body1-id"
              >
                Darkwares
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                100g
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Stock
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    min="0"
                    type="number"
                    value="30"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Stock
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Stock
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    min="0"
                    type="number"
                    value="27"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Stock
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Stock
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    min="0"
                    type="number"
                    value="24"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Stock
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                500g
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Stock
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    min="0"
                    type="number"
                    value="28"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Stock
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Stock
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    min="0"
                    type="number"
                    value="25"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Stock
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Stock
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    min="0"
                    type="number"
                    value="22"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Stock
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <hr
            class="Hr-root-id"
          />
          <div
            class="FormSpacer-spacer-id"
          />
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  type="radio"
                  value="skip"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <circle
                    cx="12"
                    cy="12"
                    fill="var(--background-paper)"
                    r="11"
                    stroke="currentColor"
                    stroke-width="2"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Skip stock for now
            </span>
          </label>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Products / Create multiple variants / prices and SKUs apply to attribute when one warehouse 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            Price
          </span>
        </div>
      </div>
      <div
        class="MuiCardContent-root-id"
      >
        <div
          class="MuiFormGroup-root-id ProductVariantCreatorPrices-container-id"
          role="radiogroup"
        >
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  type="radio"
                  value="all"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <circle
                    cx="12"
                    cy="12"
                    fill="var(--background-paper)"
                    r="11"
                    stroke="currentColor"
                    stroke-width="2"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Apply single price to all SKUs
            </span>
          </label>
          <div
            class="FormSpacer-spacer-id"
          />
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  checked=""
                  class="PrivateSwitchBase-input-id"
                  type="radio"
                  value="attribute"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <circle
                    cx="12"
                    cy="12"
                    fill="currentColor"
                    r="12"
                  />
                  <circle
                    cx="12"
                    cy="12"
                    fill="var(--background-paper)"
                    r="5"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Apply unique prices by attribute to each SKU
            </span>
          </label>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="Grid-root-id Grid-uniform-id"
          >
            <div
              class="ProductVariantCreatorPrices-label-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Choose attribute
              </div>
            </div>
            <div>
              <div
                class="MuiFormControl-root-id SingleSelectField-formControl-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Attribute
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <div
                    aria-haspopup="listbox"
                    class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id"
                    role="button"
                    tabindex="0"
                  >
                    Box Size
                  </div>
                  <input
                    aria-hidden="true"
                    class="MuiSelect-nativeInput-id"
                    tabindex="-1"
                    value="UHJvZHVjdEF0dHJpYnV0ZTo2"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:143px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <hr
            class="Hr-root-id ProductVariantCreatorPrices-hrAttribute-id"
          />
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="ProductVariantCreatorPrices-attrInputsContainer-id"
          >
            <div
              class="ProductVariantCreatorPrices-label-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                100g
              </div>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorPrices-channelName-id MuiTypography-caption-id"
              >
                Channel1
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Price
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="price"
                    step="0.01"
                    type="number"
                    value="1.2"
                  />
                  <div
                    class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      USD
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Price
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorPrices-channelName-id MuiTypography-caption-id"
              >
                Channel2
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Price
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="price"
                    step="0.01"
                    type="number"
                    value="2.2"
                  />
                  <div
                    class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      USD
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Price
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorPrices-channelName-id MuiTypography-caption-id"
              >
                Channel3
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Price
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="price"
                    step="0.01"
                    type="number"
                    value="30.1"
                  />
                  <div
                    class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      USD
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Price
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <hr
            class="Hr-root-id ProductVariantCreatorPrices-hrAttribute-id"
          />
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="ProductVariantCreatorPrices-attrInputsContainer-id"
          >
            <div
              class="ProductVariantCreatorPrices-label-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                500g
              </div>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorPrices-channelName-id MuiTypography-caption-id"
              >
                Channel1
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Price
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="price"
                    step="0.01"
                    type="number"
                    value="1.2"
                  />
                  <div
                    class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      USD
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Price
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorPrices-channelName-id MuiTypography-caption-id"
              >
                Channel2
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Price
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="price"
                    step="0.01"
                    type="number"
                    value="2.2"
                  />
                  <div
                    class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      USD
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Price
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorPrices-channelName-id MuiTypography-caption-id"
              >
                Channel3
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Price
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="price"
                    step="0.01"
                    type="number"
                    value="30.1"
                  />
                  <div
                    class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      USD
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Price
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  type="radio"
                  value="skip"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <circle
                    cx="12"
                    cy="12"
                    fill="var(--background-paper)"
                    r="11"
                    stroke="currentColor"
                    stroke-width="2"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Skip pricing for now
            </span>
          </label>
        </div>
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            Stock and Warehousing
          </span>
        </div>
      </div>
      <div
        class="MuiCardContent-root-id"
      >
        <div
          class="MuiTypography-root-id ProductVariantCreatorStock-stockHeader-id MuiTypography-h5-id"
        >
          Stock
        </div>
        <div
          class="MuiFormGroup-root-id"
          role="radiogroup"
        >
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  type="radio"
                  value="all"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <circle
                    cx="12"
                    cy="12"
                    fill="var(--background-paper)"
                    r="11"
                    stroke="currentColor"
                    stroke-width="2"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Apply single stock to all SKUs
            </span>
          </label>
          <div
            class="FormSpacer-spacer-id"
          />
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  checked=""
                  class="PrivateSwitchBase-input-id"
                  type="radio"
                  value="attribute"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <circle
                    cx="12"
                    cy="12"
                    fill="currentColor"
                    r="12"
                  />
                  <circle
                    cx="12"
                    cy="12"
                    fill="var(--background-paper)"
                    r="5"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Apply unique stock by attribute to each SKU
            </span>
          </label>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiFormControl-root-id SingleSelectField-formControl-id ProductVariantCreatorStock-shortInput-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
              data-shrink="true"
            >
              Select Attribute
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <div
                aria-haspopup="listbox"
                class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id"
                role="button"
                tabindex="0"
              >
                Box Size
              </div>
              <input
                aria-hidden="true"
                class="MuiSelect-nativeInput-id"
                tabindex="-1"
                value="UHJvZHVjdEF0dHJpYnV0ZTo2"
              />
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <path
                  d="M7 10l5 5 5-5z"
                />
              </svg>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:143px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
          <hr
            class="Hr-root-id ProductVariantCreatorStock-hrAttribute-id"
          />
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="ProductVariantCreatorStock-attributeStockScroll-id"
          >
            <div
              class="ProductVariantCreatorStock-attributeStockContainer-id ProductVariantCreatorStock-attributeStockContainer-id"
            >
              <div />
              <div
                class="MuiTypography-root-id ProductVariantCreatorStock-warehouseName-id MuiTypography-body1-id"
              >
                C our wares
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                100g
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Stock
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    min="0"
                    type="number"
                    value="30"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Stock
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                500g
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Stock
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    min="0"
                    type="number"
                    value="28"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Stock
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <hr
            class="Hr-root-id"
          />
          <div
            class="FormSpacer-spacer-id"
          />
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  type="radio"
                  value="skip"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <circle
                    cx="12"
                    cy="12"
                    fill="var(--background-paper)"
                    r="11"
                    stroke="currentColor"
                    stroke-width="2"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Skip stock for now
            </span>
          </label>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Products / Create multiple variants / prices and SKUs ship when no warehouses 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            Price
          </span>
        </div>
      </div>
      <div
        class="MuiCardContent-root-id"
      >
        <div
          class="MuiFormGroup-root-id ProductVariantCreatorPrices-container-id"
          role="radiogroup"
        >
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  type="radio"
                  value="all"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <circle
                    cx="12"
                    cy="12"
                    fill="var(--background-paper)"
                    r="11"
                    stroke="currentColor"
                    stroke-width="2"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Apply single price to all SKUs
            </span>
          </label>
          <div
            class="FormSpacer-spacer-id"
          />
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  checked=""
                  class="PrivateSwitchBase-input-id"
                  type="radio"
                  value="attribute"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <circle
                    cx="12"
                    cy="12"
                    fill="currentColor"
                    r="12"
                  />
                  <circle
                    cx="12"
                    cy="12"
                    fill="var(--background-paper)"
                    r="5"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Apply unique prices by attribute to each SKU
            </span>
          </label>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="Grid-root-id Grid-uniform-id"
          >
            <div
              class="ProductVariantCreatorPrices-label-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Choose attribute
              </div>
            </div>
            <div>
              <div
                class="MuiFormControl-root-id SingleSelectField-formControl-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Attribute
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <div
                    aria-haspopup="listbox"
                    class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id"
                    role="button"
                    tabindex="0"
                  >
                    Box Size
                  </div>
                  <input
                    aria-hidden="true"
                    class="MuiSelect-nativeInput-id"
                    tabindex="-1"
                    value="UHJvZHVjdEF0dHJpYnV0ZTo2"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:143px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <hr
            class="Hr-root-id ProductVariantCreatorPrices-hrAttribute-id"
          />
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="ProductVariantCreatorPrices-attrInputsContainer-id"
          >
            <div
              class="ProductVariantCreatorPrices-label-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                100g
              </div>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorPrices-channelName-id MuiTypography-caption-id"
              >
                Channel1
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Price
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="price"
                    step="0.01"
                    type="number"
                    value="1.2"
                  />
                  <div
                    class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      USD
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Price
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorPrices-channelName-id MuiTypography-caption-id"
              >
                Channel2
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Price
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="price"
                    step="0.01"
                    type="number"
                    value="2.2"
                  />
                  <div
                    class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      USD
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Price
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorPrices-channelName-id MuiTypography-caption-id"
              >
                Channel3
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Price
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="price"
                    step="0.01"
                    type="number"
                    value="30.1"
                  />
                  <div
                    class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      USD
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Price
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <hr
            class="Hr-root-id ProductVariantCreatorPrices-hrAttribute-id"
          />
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="ProductVariantCreatorPrices-attrInputsContainer-id"
          >
            <div
              class="ProductVariantCreatorPrices-label-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                500g
              </div>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorPrices-channelName-id MuiTypography-caption-id"
              >
                Channel1
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Price
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="price"
                    step="0.01"
                    type="number"
                    value="1.2"
                  />
                  <div
                    class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      USD
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Price
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorPrices-channelName-id MuiTypography-caption-id"
              >
                Channel2
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Price
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="price"
                    step="0.01"
                    type="number"
                    value="2.2"
                  />
                  <div
                    class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      USD
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Price
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ProductVariantCreatorPrices-channelName-id MuiTypography-caption-id"
              >
                Channel3
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Price
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="price"
                    step="0.01"
                    type="number"
                    value="30.1"
                  />
                  <div
                    class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                    >
                      USD
                    </div>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Price
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <input
                  class="PrivateSwitchBase-input-id"
                  type="radio"
                  value="skip"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <circle
                    cx="12"
                    cy="12"
                    fill="var(--background-paper)"
                    r="11"
                    stroke="currentColor"
                    stroke-width="2"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Skip pricing for now
            </span>
          </label>
        </div>
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            Stock and Warehousing
          </span>
        </div>
      </div>
      <div
        class="MuiCardContent-root-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
        >
          There are no warehouses set up for your store. You can configure variants without providing stock quantities.
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Products / Create multiple variants / summary default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="MuiPaper-root-id MuiCard-root-id ProductVariantCreatorSummary-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            Created Variants
          </span>
        </div>
      </div>
      <div
        class="ProductVariantCreatorSummary-summary-id ProductVariantCreatorSummary-summary-id"
      >
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colHeader-id ProductVariantCreatorSummary-colName-id"
        >
          Variant
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colHeader-id ProductVariantCreatorSummary-colPrice-id"
        >
          Channel1 Price
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colHeader-id ProductVariantCreatorSummary-colPrice-id"
        >
          Channel2 Price
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colHeader-id ProductVariantCreatorSummary-colPrice-id"
        >
          Channel3 Price
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colHeader-id ProductVariantCreatorSummary-colStock-id"
        >
          C our wares
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colHeader-id ProductVariantCreatorSummary-colStock-id"
        >
          Be stocked
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colHeader-id ProductVariantCreatorSummary-colStock-id"
        >
          Darkwares
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colHeader-id ProductVariantCreatorSummary-colSku-id"
        >
          SKU
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colHeader-id"
        />
        <hr
          class="Hr-root-id ProductVariantCreatorSummary-hr-id ProductVariantCreatorSummary-hr-id"
        />
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colName-id"
        >
          <span
            class="ProductVariantCreatorSummary-attributeValue-id"
            style="color:#1565c0"
          >
            100g
          </span>
          <span
            class="ProductVariantCreatorSummary-attributeValue-id"
            style="color:#00838f"
          >
            Arabica
          </span>
          <span
            class="ProductVariantCreatorSummary-attributeValue-id"
            style="color:#2e7d32"
          >
            Round
          </span>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colPrice-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                min="0"
                name="price"
                required=""
                step="0.01"
                type="number"
                value="1.2"
              />
              <div
                class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                >
                  USD
                </div>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colPrice-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                min="0"
                name="price"
                required=""
                step="0.01"
                type="number"
                value="2.2"
              />
              <div
                class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                >
                  USD
                </div>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colPrice-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                min="0"
                name="price"
                required=""
                step="0.01"
                type="number"
                value="30.1"
              />
              <div
                class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                >
                  USD
                </div>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colStock-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                min="0"
                type="number"
                value="30"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colStock-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                min="0"
                type="number"
                value="27"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colStock-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                min="0"
                type="number"
                value="24"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colSku-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="sku"
                type="text"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id"
        >
          <button
            class="MuiButtonBase-root-id IconButton-secondary-id ProductVariantCreatorSummary-delete-id IconButton-hoverOutline-id"
            color="primary"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id"
              fill="none"
              focusable="false"
              height="24"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.5"
              />
            </svg>
          </button>
        </div>
        <hr
          class="Hr-root-id ProductVariantCreatorSummary-hr-id ProductVariantCreatorSummary-hr-id"
        />
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colName-id"
        >
          <span
            class="ProductVariantCreatorSummary-attributeValue-id"
            style="color:#1565c0"
          >
            100g
          </span>
          <span
            class="ProductVariantCreatorSummary-attributeValue-id"
            style="color:#00838f"
          >
            Arabica
          </span>
          <span
            class="ProductVariantCreatorSummary-attributeValue-id"
            style="color:#2e7d32"
          >
            Polo
          </span>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colPrice-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                min="0"
                name="price"
                required=""
                step="0.01"
                type="number"
                value="1.2"
              />
              <div
                class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                >
                  USD
                </div>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colPrice-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                min="0"
                name="price"
                required=""
                step="0.01"
                type="number"
                value="2.2"
              />
              <div
                class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                >
                  USD
                </div>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colPrice-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                min="0"
                name="price"
                required=""
                step="0.01"
                type="number"
                value="30.1"
              />
              <div
                class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                >
                  USD
                </div>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colStock-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                min="0"
                type="number"
                value="30"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colStock-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                min="0"
                type="number"
                value="27"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colStock-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                min="0"
                type="number"
                value="24"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colSku-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="sku"
                type="text"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id"
        >
          <button
            class="MuiButtonBase-root-id IconButton-secondary-id ProductVariantCreatorSummary-delete-id IconButton-hoverOutline-id"
            color="primary"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id"
              fill="none"
              focusable="false"
              height="24"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.5"
              />
            </svg>
          </button>
        </div>
        <hr
          class="Hr-root-id ProductVariantCreatorSummary-hr-id ProductVariantCreatorSummary-hr-id"
        />
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colName-id"
        >
          <span
            class="ProductVariantCreatorSummary-attributeValue-id"
            style="color:#1565c0"
          >
            500g
          </span>
          <span
            class="ProductVariantCreatorSummary-attributeValue-id"
            style="color:#00838f"
          >
            Arabica
          </span>
          <span
            class="ProductVariantCreatorSummary-attributeValue-id"
            style="color:#2e7d32"
          >
            Round
          </span>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colPrice-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                min="0"
                name="price"
                required=""
                step="0.01"
                type="number"
                value="1.2"
              />
              <div
                class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                >
                  USD
                </div>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colPrice-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                min="0"
                name="price"
                required=""
                step="0.01"
                type="number"
                value="2.2"
              />
              <div
                class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                >
                  USD
                </div>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colPrice-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                min="0"
                name="price"
                required=""
                step="0.01"
                type="number"
                value="30.1"
              />
              <div
                class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                >
                  USD
                </div>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colStock-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                min="0"
                type="number"
                value="28"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colStock-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                min="0"
                type="number"
                value="25"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colStock-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                min="0"
                type="number"
                value="22"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colSku-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="sku"
                type="text"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id"
        >
          <button
            class="MuiButtonBase-root-id IconButton-secondary-id ProductVariantCreatorSummary-delete-id IconButton-hoverOutline-id"
            color="primary"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id"
              fill="none"
              focusable="false"
              height="24"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.5"
              />
            </svg>
          </button>
        </div>
        <hr
          class="Hr-root-id ProductVariantCreatorSummary-hr-id ProductVariantCreatorSummary-hr-id"
        />
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colName-id"
        >
          <span
            class="ProductVariantCreatorSummary-attributeValue-id"
            style="color:#1565c0"
          >
            500g
          </span>
          <span
            class="ProductVariantCreatorSummary-attributeValue-id"
            style="color:#00838f"
          >
            Arabica
          </span>
          <span
            class="ProductVariantCreatorSummary-attributeValue-id"
            style="color:#2e7d32"
          >
            Polo
          </span>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colPrice-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                min="0"
                name="price"
                required=""
                step="0.01"
                type="number"
                value="1.2"
              />
              <div
                class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                >
                  USD
                </div>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colPrice-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                min="0"
                name="price"
                required=""
                step="0.01"
                type="number"
                value="2.2"
              />
              <div
                class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                >
                  USD
                </div>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colPrice-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                min="0"
                name="price"
                required=""
                step="0.01"
                type="number"
                value="30.1"
              />
              <div
                class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                >
                  USD
                </div>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colStock-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                min="0"
                type="number"
                value="28"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colStock-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                min="0"
                type="number"
                value="25"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colStock-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                min="0"
                type="number"
                value="22"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colSku-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="sku"
                type="text"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id"
        >
          <button
            class="MuiButtonBase-root-id IconButton-secondary-id ProductVariantCreatorSummary-delete-id IconButton-hoverOutline-id"
            color="primary"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id"
              fill="none"
              focusable="false"
              height="24"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.5"
              />
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Products / Create multiple variants / summary errors 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="MuiPaper-root-id MuiCard-root-id ProductVariantCreatorSummary-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            Created Variants
          </span>
        </div>
      </div>
      <div
        class="ProductVariantCreatorSummary-summary-id ProductVariantCreatorSummary-summary-id"
      >
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colHeader-id ProductVariantCreatorSummary-colName-id"
        >
          Variant
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colHeader-id ProductVariantCreatorSummary-colPrice-id"
        >
          Channel1 Price
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colHeader-id ProductVariantCreatorSummary-colPrice-id"
        >
          Channel2 Price
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colHeader-id ProductVariantCreatorSummary-colPrice-id"
        >
          Channel3 Price
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colHeader-id ProductVariantCreatorSummary-colStock-id"
        >
          C our wares
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colHeader-id ProductVariantCreatorSummary-colStock-id"
        >
          Be stocked
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colHeader-id ProductVariantCreatorSummary-colStock-id"
        >
          Darkwares
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colHeader-id ProductVariantCreatorSummary-colSku-id"
        >
          SKU
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colHeader-id"
        />
        <hr
          class="Hr-root-id ProductVariantCreatorSummary-hr-id ProductVariantCreatorSummary-hr-id"
        />
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colName-id"
        >
          <span
            class="ProductVariantCreatorSummary-attributeValue-id"
            style="color:#1565c0"
          >
            100g
          </span>
          <span
            class="ProductVariantCreatorSummary-attributeValue-id"
            style="color:#00838f"
          >
            Arabica
          </span>
          <span
            class="ProductVariantCreatorSummary-attributeValue-id"
            style="color:#2e7d32"
          >
            Round
          </span>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colPrice-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                min="0"
                name="price"
                required=""
                step="0.01"
                type="number"
                value="1.2"
              />
              <div
                class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                >
                  USD
                </div>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colPrice-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                min="0"
                name="price"
                required=""
                step="0.01"
                type="number"
                value="2.2"
              />
              <div
                class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                >
                  USD
                </div>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colPrice-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                min="0"
                name="price"
                required=""
                step="0.01"
                type="number"
                value="30.1"
              />
              <div
                class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                >
                  USD
                </div>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colStock-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                min="0"
                type="number"
                value="30"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colStock-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                min="0"
                type="number"
                value="27"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colStock-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                min="0"
                type="number"
                value="24"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colSku-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="sku"
                type="text"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id"
        >
          <button
            class="MuiButtonBase-root-id IconButton-secondary-id ProductVariantCreatorSummary-delete-id IconButton-hoverOutline-id"
            color="primary"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id"
              fill="none"
              focusable="false"
              height="24"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.5"
              />
            </svg>
          </button>
        </div>
        <hr
          class="Hr-root-id ProductVariantCreatorSummary-hr-id ProductVariantCreatorSummary-hr-id"
        />
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colName-id"
        >
          <span
            class="ProductVariantCreatorSummary-attributeValue-id"
            style="color:#1565c0"
          >
            100g
          </span>
          <span
            class="ProductVariantCreatorSummary-attributeValue-id"
            style="color:#00838f"
          >
            Arabica
          </span>
          <span
            class="ProductVariantCreatorSummary-attributeValue-id"
            style="color:#2e7d32"
          >
            Polo
          </span>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colPrice-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                min="0"
                name="price"
                required=""
                step="0.01"
                type="number"
                value="1.2"
              />
              <div
                class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                >
                  USD
                </div>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colPrice-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                min="0"
                name="price"
                required=""
                step="0.01"
                type="number"
                value="2.2"
              />
              <div
                class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                >
                  USD
                </div>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colPrice-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                min="0"
                name="price"
                required=""
                step="0.01"
                type="number"
                value="30.1"
              />
              <div
                class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                >
                  USD
                </div>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colStock-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                min="0"
                type="number"
                value="30"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colStock-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                min="0"
                type="number"
                value="27"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colStock-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                min="0"
                type="number"
                value="24"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colSku-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="sku"
                type="text"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id"
        >
          <button
            class="MuiButtonBase-root-id IconButton-secondary-id ProductVariantCreatorSummary-delete-id IconButton-hoverOutline-id"
            color="primary"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id"
              fill="none"
              focusable="false"
              height="24"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.5"
              />
            </svg>
          </button>
        </div>
        <hr
          class="Hr-root-id ProductVariantCreatorSummary-hr-id ProductVariantCreatorSummary-hr-id"
        />
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colName-id"
        >
          <span
            class="ProductVariantCreatorSummary-attributeValue-id"
            style="color:#1565c0"
          >
            500g
          </span>
          <span
            class="ProductVariantCreatorSummary-attributeValue-id"
            style="color:#00838f"
          >
            Arabica
          </span>
          <span
            class="ProductVariantCreatorSummary-attributeValue-id"
            style="color:#2e7d32"
          >
            Round
          </span>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colPrice-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                min="0"
                name="price"
                required=""
                step="0.01"
                type="number"
                value="1.2"
              />
              <div
                class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                >
                  USD
                </div>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colPrice-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                min="0"
                name="price"
                required=""
                step="0.01"
                type="number"
                value="2.2"
              />
              <div
                class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                >
                  USD
                </div>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colPrice-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                min="0"
                name="price"
                required=""
                step="0.01"
                type="number"
                value="30.1"
              />
              <div
                class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                >
                  USD
                </div>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colStock-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                min="0"
                type="number"
                value="28"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colStock-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                min="0"
                type="number"
                value="25"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colStock-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                min="0"
                type="number"
                value="22"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colSku-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="sku"
                type="text"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id"
        >
          <button
            class="MuiButtonBase-root-id IconButton-secondary-id ProductVariantCreatorSummary-delete-id IconButton-hoverOutline-id"
            color="primary"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id"
              fill="none"
              focusable="false"
              height="24"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.5"
              />
            </svg>
          </button>
        </div>
        <hr
          class="Hr-root-id ProductVariantCreatorSummary-hr-id ProductVariantCreatorSummary-hr-id"
        />
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colName-id"
        >
          <span
            class="ProductVariantCreatorSummary-attributeValue-id"
            style="color:#1565c0"
          >
            500g
          </span>
          <span
            class="ProductVariantCreatorSummary-attributeValue-id"
            style="color:#00838f"
          >
            Arabica
          </span>
          <span
            class="ProductVariantCreatorSummary-attributeValue-id"
            style="color:#2e7d32"
          >
            Polo
          </span>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colPrice-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                min="0"
                name="price"
                required=""
                step="0.01"
                type="number"
                value="1.2"
              />
              <div
                class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                >
                  USD
                </div>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colPrice-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                min="0"
                name="price"
                required=""
                step="0.01"
                type="number"
                value="2.2"
              />
              <div
                class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                >
                  USD
                </div>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colPrice-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                min="0"
                name="price"
                required=""
                step="0.01"
                type="number"
                value="30.1"
              />
              <div
                class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                >
                  USD
                </div>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colStock-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                min="0"
                type="number"
                value="28"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colStock-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                min="0"
                type="number"
                value="25"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colStock-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                min="0"
                type="number"
                value="22"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id ProductVariantCreatorSummary-colSku-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatorSummary-input-id MuiFormControl-fullWidth-id"
          >
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="true"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="sku"
                type="text"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
            >
              SKUs must be unique
            </p>
          </div>
        </div>
        <div
          class="ProductVariantCreatorSummary-col-id"
        >
          <button
            class="MuiButtonBase-root-id IconButton-secondary-id ProductVariantCreatorSummary-delete-id IconButton-hoverOutline-id"
            color="primary"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MacawIcon-root-id"
              fill="none"
              focusable="false"
              height="24"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.5"
              />
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Products / Create multiple variants choose values 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            Box Size
          </span>
        </div>
      </div>
      <div
        class="MuiCardContent-root-id"
        data-test-id="value-container"
      >
        <div
          aria-expanded="false"
          aria-haspopup="listbox"
          aria-labelledby="downshift-36-label"
          class="MultiAutocompleteSelectField-container-id"
          role="combobox"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
              data-shrink="false"
            >
              Values
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-autocomplete="list"
                aria-invalid="false"
                aria-labelledby="downshift-36-label"
                autocomplete="off"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                id="downshift-36-menu"
                role="listbox"
                type="text"
                value=""
              />
              <div
                aria-haspopup="true"
                aria-label="open menu"
                class="MultiAutocompleteSelectField-adornment-id"
                data-toggle="true"
                role="button"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="24"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m8 10 4 4 4-4"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="1.5"
                  />
                </svg>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id"
                >
                  <span>
                    Values
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="MultiAutocompleteSelectField-chipContainer-id"
        >
          <div
            class="MultiAutocompleteSelectField-chip-id"
          >
            <div
              class="MultiAutocompleteSelectField-chipInner-id"
            >
              <div
                class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
              >
                100g
              </div>
              <button
                class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                data-test-id="remove"
                tabindex="0"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                  />
                </svg>
              </button>
            </div>
          </div>
          <div
            class="MultiAutocompleteSelectField-chip-id"
          >
            <div
              class="MultiAutocompleteSelectField-chipInner-id"
            >
              <div
                class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
              >
                500g
              </div>
              <button
                class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                data-test-id="remove"
                tabindex="0"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                  />
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiCardHeader-root-id"
      >
        <div
          class="MuiCardHeader-content-id"
        >
          <span
            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
          >
            Coffee Genre
          </span>
        </div>
      </div>
      <div
        class="MuiCardContent-root-id"
        data-test-id="value-container"
      >
        <div
          aria-expanded="false"
          aria-haspopup="listbox"
          aria-labelledby="downshift-37-label"
          class="MultiAutocompleteSelectField-container-id"
          role="combobox"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
              data-shrink="false"
            >
              Values
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            >
              <input
                aria-autocomplete="list"
                aria-invalid="false"
                aria-labelledby="downshift-37-label"
                autocomplete="off"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                id="downshift-37-menu"
                role="listbox"
                type="text"
                value=""
              />
              <div
                aria-haspopup="true"
                aria-label="open menu"
                class="MultiAutocompleteSelectField-adornment-id"
                data-toggle="true"
                role="button"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="24"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m8 10 4 4 4-4"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="1.5"
                  />
                </svg>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id"
                >
                  <span>
                    Values
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div
          class="MultiAutocompleteSelectField-chipContainer-id"
        >
          <div
            class="MultiAutocompleteSelectField-chip-id"
          >
            <div
              class="MultiAutocompleteSelectField-chipInner-id"
            >
              <div
                class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
              >
                Arabica
              </div>
              <button
                class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                data-test-id="remove"
                tabindex="0"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                  />
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
  </div>
</div>
`;

exports[`Storyshots Views / Products / Create multiple variants interactive 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="CreatorSteps-root-id"
    >
      <div
        class="CreatorSteps-tab-id CreatorSteps-tabActive-id CreatorSteps-tabVisited-id"
      >
        <div
          class="MuiTypography-root-id CreatorSteps-label-id MuiTypography-caption-id"
        >
          Select Values
        </div>
      </div>
      <div
        class="CreatorSteps-tab-id"
      >
        <div
          class="MuiTypography-root-id CreatorSteps-label-id MuiTypography-caption-id"
        >
          Prices and SKU
        </div>
      </div>
      <div
        class="CreatorSteps-tab-id"
      >
        <div
          class="MuiTypography-root-id CreatorSteps-label-id MuiTypography-caption-id"
        >
          Summary
        </div>
      </div>
    </div>
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Choose Values
          <div
            class="MuiTypography-root-id ProductVariantCreatePage-description-id MuiTypography-body2-id"
          >
            Selected values will be used to create variants for the configurable product.
          </div>
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id ProductVariantCreatePage-button-id MuiButton-containedPrimary-id"
            data-test-id="next-step"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Next
            </span>
          </button>
        </div>
      </div>
    </div>
    <hr
      class="Hr-root-id ProductVariantCreatePage-hr-id"
    />
    <div
      class="ProductVariantCreatePage-content-id"
    >
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Author
            </span>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
          data-test-id="value-container"
        >
          <div
            aria-expanded="false"
            aria-haspopup="listbox"
            aria-labelledby="downshift-38-label"
            class="MultiAutocompleteSelectField-container-id"
            role="combobox"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                data-shrink="false"
              >
                Values
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              >
                <input
                  aria-autocomplete="list"
                  aria-invalid="false"
                  aria-labelledby="downshift-38-label"
                  autocomplete="off"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  id="downshift-38-menu"
                  role="listbox"
                  type="text"
                  value=""
                />
                <div
                  aria-haspopup="true"
                  aria-label="open menu"
                  class="MultiAutocompleteSelectField-adornment-id"
                  data-toggle="true"
                  role="button"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </div>
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id"
                  >
                    <span>
                      Values
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
          <div
            class="MultiAutocompleteSelectField-chipContainer-id"
          />
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Box Size
            </span>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
          data-test-id="value-container"
        >
          <div
            aria-expanded="false"
            aria-haspopup="listbox"
            aria-labelledby="downshift-39-label"
            class="MultiAutocompleteSelectField-container-id"
            role="combobox"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                data-shrink="false"
              >
                Values
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              >
                <input
                  aria-autocomplete="list"
                  aria-invalid="false"
                  aria-labelledby="downshift-39-label"
                  autocomplete="off"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  id="downshift-39-menu"
                  role="listbox"
                  type="text"
                  value=""
                />
                <div
                  aria-haspopup="true"
                  aria-label="open menu"
                  class="MultiAutocompleteSelectField-adornment-id"
                  data-toggle="true"
                  role="button"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </div>
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id"
                  >
                    <span>
                      Values
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
          <div
            class="MultiAutocompleteSelectField-chipContainer-id"
          />
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Coffee Genre
            </span>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
          data-test-id="value-container"
        >
          <div
            aria-expanded="false"
            aria-haspopup="listbox"
            aria-labelledby="downshift-40-label"
            class="MultiAutocompleteSelectField-container-id"
            role="combobox"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                data-shrink="false"
              >
                Values
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              >
                <input
                  aria-autocomplete="list"
                  aria-invalid="false"
                  aria-labelledby="downshift-40-label"
                  autocomplete="off"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  id="downshift-40-menu"
                  role="listbox"
                  type="text"
                  value=""
                />
                <div
                  aria-haspopup="true"
                  aria-label="open menu"
                  class="MultiAutocompleteSelectField-adornment-id"
                  data-toggle="true"
                  role="button"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </div>
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id"
                  >
                    <span>
                      Values
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
          <div
            class="MultiAutocompleteSelectField-chipContainer-id"
          />
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
            >
              Color
            </span>
          </div>
        </div>
        <div
          class="MuiCardContent-root-id"
          data-test-id="value-container"
        >
          <div
            aria-expanded="false"
            aria-haspopup="listbox"
            aria-labelledby="downshift-41-label"
            class="MultiAutocompleteSelectField-container-id"
            role="combobox"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                data-shrink="false"
              >
                Values
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              >
                <input
                  aria-autocomplete="list"
                  aria-invalid="false"
                  aria-labelledby="downshift-41-label"
                  autocomplete="off"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  id="downshift-41-menu"
                  role="listbox"
                  type="text"
                  value=""
                />
                <div
                  aria-haspopup="true"
                  aria-label="open menu"
                  class="MultiAutocompleteSelectField-adornment-id"
                  data-toggle="true"
                  role="button"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m8 10 4 4 4-4"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </div>
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id"
                  >
                    <span>
                      Values
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
          <div
            class="MultiAutocompleteSelectField-chipContainer-id"
          />
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Products / Create product When loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Add product
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-description"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Description
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
                />
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Product Rating
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="rating"
                      type="number"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Product Rating
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Search Engine Preview
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this product easier to find
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductOrganization-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Organize Product
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-79-label"
                class="SingleAutocompleteSelectField-container-id"
                data-test-id="product-type"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Product Type
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-79-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      disabled=""
                      id="downshift-79-input"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Product Type
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-80-label"
                class="SingleAutocompleteSelectField-container-id"
                data-test-id="category"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Category
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-80-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      disabled=""
                      id="downshift-80-input"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Category
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-81-label"
                class="MultiAutocompleteSelectField-container-id"
                data-test-id="collections"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Collections
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-81-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-81-menu"
                      role="listbox"
                      testid="collection"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Collections
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                  >
                    *Optional. Adding product to collection helps users find it.
                  </p>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              />
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              You will be able to define availability of product after creating variants.
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Taxes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id ProductTaxes-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                data-test-id="override-tax-type"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      name="changeTaxCode"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Override the product type's tax rate
                </span>
              </label>
              <hr
                class="Hr-root-id ProductTaxes-hr-id"
              />
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                data-test-id="charge-taxes"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      name="chargeTaxes"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Charge taxes on this product
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Products / Create product default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Add product
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-description"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Description
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                />
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Product Rating
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="rating"
                      type="number"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Product Rating
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Search Engine Preview
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this product easier to find
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductOrganization-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Organize Product
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-76-label"
                class="SingleAutocompleteSelectField-container-id"
                data-test-id="product-type"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Product Type
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-76-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-76-input"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Product Type
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-77-label"
                class="SingleAutocompleteSelectField-container-id"
                data-test-id="category"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Category
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-77-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-77-input"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Category
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-78-label"
                class="MultiAutocompleteSelectField-container-id"
                data-test-id="collections"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Collections
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-78-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-78-menu"
                      role="listbox"
                      testid="collection"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Collections
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                  >
                    *Optional. Adding product to collection helps users find it.
                  </p>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              />
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              You will be able to define availability of product after creating variants.
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Taxes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id ProductTaxes-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
                data-test-id="override-tax-type"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="changeTaxCode"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Override the product type's tax rate
                </span>
              </label>
              <hr
                class="Hr-root-id ProductTaxes-hr-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
                data-test-id="charge-taxes"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="chargeTaxes"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Charge taxes on this product
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Products / Create product form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Add product
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                  data-shrink="false"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Invalid value
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-description"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Description
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                />
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Product Rating
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="rating"
                      type="number"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Product Rating
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Attributes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Attributes-cardContent-id"
            >
              <div
                class="Attributes-expansionBar-id"
              >
                <div
                  class="Attributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    1 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
                  data-test-id="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Author
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-82-label"
                    class="SingleAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                        data-shrink="false"
                      >
                        Value
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="true"
                          aria-labelledby="downshift-82-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-82-input"
                          type="text"
                          value=""
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="SingleAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Value
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                      <p
                        class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                      >
                        Invalid value
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Search Engine Preview
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this product easier to find
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductOrganization-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Organize Product
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-83-label"
                class="SingleAutocompleteSelectField-container-id"
                data-test-id="product-type"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                    data-shrink="false"
                  >
                    Product Type
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="true"
                      aria-labelledby="downshift-83-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-83-input"
                      type="text"
                      value="Candy"
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Product Type
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Invalid value
                  </p>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-84-label"
                class="SingleAutocompleteSelectField-container-id"
                data-test-id="category"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                    data-shrink="false"
                  >
                    Category
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="true"
                      aria-labelledby="downshift-84-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-84-input"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Category
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Invalid value
                  </p>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-85-label"
                class="MultiAutocompleteSelectField-container-id"
                data-test-id="collections"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Collections
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-85-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-85-menu"
                      role="listbox"
                      testid="collection"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Collections
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                  >
                    *Optional. Adding product to collection helps users find it.
                  </p>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              />
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              You will be able to define availability of product after creating variants.
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Taxes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id ProductTaxes-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
                data-test-id="override-tax-type"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="changeTaxCode"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Override the product type's tax rate
                </span>
              </label>
              <hr
                class="Hr-root-id ProductTaxes-hr-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
                data-test-id="charge-taxes"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="chargeTaxes"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Charge taxes on this product
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Products / Create product variant add first variant 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Add variant
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Variants
                </span>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                      colspan="3"
                    >
                      <a
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        data-test-id="button-add-variant"
                        href="/products/variant/add"
                        role="button"
                        tabindex="0"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Add variant
                        </span>
                      </a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Variant Attributes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Attributes-cardContent-id"
            >
              <div
                class="Attributes-expansionBar-id"
              >
                <div
                  class="Attributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    1 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
                  data-test-id="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Attachment
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    class="AttributeRow-fileField-id"
                  >
                    <div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                        data-test-id="button-upload-file"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Choose file
                        </span>
                      </button>
                    </div>
                  </div>
                  <input
                    class="FileUploadField-fileField-id"
                    data-test-id="upload-file-input"
                    id="fileUpload"
                    name="attribute:Attachment"
                    type="file"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Variant Selection Attributes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Attributes-cardContent-id"
            >
              <div
                class="Attributes-expansionBar-id"
              >
                <div
                  class="Attributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    1 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
                  data-test-id="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Color
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-143-label"
                    class="SingleAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Value
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-143-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-143-input"
                          type="text"
                          value=""
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="SingleAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Value
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Checkout limits
                  <div
                    class="MuiChip-root-id ProductVariantCheckoutSettings-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                    >
                      Preview
                    </span>
                  </div>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Limit quantity per checkout (optional)
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="none"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    min="1"
                    name="quantityLimitPerCustomer"
                    type="number"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Limit quantity per checkout (optional)
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                >
                  Your customer won't be allowed to buy bigger quantity per checkout than shown here.
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Shipping
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Weight
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      name="weight"
                      type="text"
                      value=""
                    />
                    <div
                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        kg
                      </div>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Weight
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Pricing
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                There is no channel to define prices for. You need to first add variant to channels to define prices.
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Inventory
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductStocks-skuInputContainer-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    SKU (Stock Keeping Unit)
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="sku"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          SKU (Stock Keeping Unit)
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="isPreorder"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Variant currently in preorder
                  <div
                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                    >
                      Preview
                    </span>
                  </div>
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="trackInventory"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Track Inventory
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    Active inventory tracking will automatically calculate changes of stock
                  </div>
                </span>
              </label>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id ProductStocks-quantityContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <div
                  class="ProductStocks-quantityHeader-id"
                >
                  <span>
                    Quantity
                  </span>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Assign this variant to a channel in the product channel manager to define warehouses allocation
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Products / Create product variant default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Add variant
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Variants
                </span>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <a
                class="TableRowLink-link-id"
                href="/products/variant/pv75934"
              />
              <a
                class="TableRowLink-link-id"
                href="/products/variant/pv68615"
              />
              <table
                class="MuiTable-root-id"
              >
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder255x255.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder255x255.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        />
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                    >
                      Cordoba Oro
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder255x255.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder255x255.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        />
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                    >
                      silver
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                      colspan="3"
                    >
                      <a
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        data-test-id="button-add-variant"
                        href="/products/variant/add"
                        role="button"
                        tabindex="0"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Add variant
                        </span>
                      </a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Variant Attributes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Attributes-cardContent-id"
            >
              <div
                class="Attributes-expansionBar-id"
              >
                <div
                  class="Attributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    1 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
                  data-test-id="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Attachment
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    class="AttributeRow-fileField-id"
                  >
                    <div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                        data-test-id="button-upload-file"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Choose file
                        </span>
                      </button>
                    </div>
                  </div>
                  <input
                    class="FileUploadField-fileField-id"
                    data-test-id="upload-file-input"
                    id="fileUpload"
                    name="attribute:Attachment"
                    type="file"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Variant Selection Attributes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Attributes-cardContent-id"
            >
              <div
                class="Attributes-expansionBar-id"
              >
                <div
                  class="Attributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    1 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
                  data-test-id="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Color
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-141-label"
                    class="SingleAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Value
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-141-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-141-input"
                          type="text"
                          value=""
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="SingleAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Value
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Checkout limits
                  <div
                    class="MuiChip-root-id ProductVariantCheckoutSettings-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                    >
                      Preview
                    </span>
                  </div>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Limit quantity per checkout (optional)
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="none"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    min="1"
                    name="quantityLimitPerCustomer"
                    type="number"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Limit quantity per checkout (optional)
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                >
                  Your customer won't be allowed to buy bigger quantity per checkout than shown here.
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Shipping
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Weight
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      name="weight"
                      type="text"
                      value=""
                    />
                    <div
                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        kg
                      </div>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Weight
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Pricing
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                There is no channel to define prices for. You need to first add variant to channels to define prices.
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Inventory
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductStocks-skuInputContainer-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    SKU (Stock Keeping Unit)
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="sku"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          SKU (Stock Keeping Unit)
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="isPreorder"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Variant currently in preorder
                  <div
                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                    >
                      Preview
                    </span>
                  </div>
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="trackInventory"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Track Inventory
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    Active inventory tracking will automatically calculate changes of stock
                  </div>
                </span>
              </label>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id ProductStocks-quantityContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <div
                  class="ProductStocks-quantityHeader-id"
                >
                  <span>
                    Quantity
                  </span>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Assign this variant to a channel in the product channel manager to define warehouses allocation
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Products / Create product variant no warehouses 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Add variant
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Variants
                </span>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <a
                class="TableRowLink-link-id"
                href="/products/variant/pv75934"
              />
              <a
                class="TableRowLink-link-id"
                href="/products/variant/pv68615"
              />
              <table
                class="MuiTable-root-id"
              >
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder255x255.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder255x255.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        />
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                    >
                      Cordoba Oro
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder255x255.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder255x255.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        />
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                    >
                      silver
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                      colspan="3"
                    >
                      <a
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        data-test-id="button-add-variant"
                        href="/products/variant/add"
                        role="button"
                        tabindex="0"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Add variant
                        </span>
                      </a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Variant Attributes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Attributes-cardContent-id"
            >
              <div
                class="Attributes-expansionBar-id"
              >
                <div
                  class="Attributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    1 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
                  data-test-id="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Attachment
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    class="AttributeRow-fileField-id"
                  >
                    <div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                        data-test-id="button-upload-file"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Choose file
                        </span>
                      </button>
                    </div>
                  </div>
                  <input
                    class="FileUploadField-fileField-id"
                    data-test-id="upload-file-input"
                    id="fileUpload"
                    name="attribute:Attachment"
                    type="file"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Variant Selection Attributes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Attributes-cardContent-id"
            >
              <div
                class="Attributes-expansionBar-id"
              >
                <div
                  class="Attributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    1 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
                  data-test-id="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Color
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-144-label"
                    class="SingleAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Value
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-144-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-144-input"
                          type="text"
                          value=""
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="SingleAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Value
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Checkout limits
                  <div
                    class="MuiChip-root-id ProductVariantCheckoutSettings-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                    >
                      Preview
                    </span>
                  </div>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Limit quantity per checkout (optional)
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="none"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    min="1"
                    name="quantityLimitPerCustomer"
                    type="number"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Limit quantity per checkout (optional)
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                >
                  Your customer won't be allowed to buy bigger quantity per checkout than shown here.
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Shipping
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Weight
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      name="weight"
                      type="text"
                      value=""
                    />
                    <div
                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        kg
                      </div>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Weight
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Pricing
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                There is no channel to define prices for. You need to first add variant to channels to define prices.
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Inventory
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductStocks-skuInputContainer-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    SKU (Stock Keeping Unit)
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="sku"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          SKU (Stock Keeping Unit)
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="isPreorder"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Variant currently in preorder
                  <div
                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                    >
                      Preview
                    </span>
                  </div>
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="trackInventory"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Track Inventory
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    Active inventory tracking will automatically calculate changes of stock
                  </div>
                </span>
              </label>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id ProductStocks-quantityContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <div
                  class="ProductStocks-quantityHeader-id"
                >
                  <span>
                    Quantity
                  </span>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Assign this variant to a channel in the product channel manager to define warehouses allocation
              </div>
              <div
                class="MuiTypography-root-id ProductStocks-noWarehouseInfo-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There are no warehouses set up for your store. To add stock quantity to the variant please 
                <a
                  class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                >
                  configure a warehouse
                </a>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Products / Create product variant when loading data 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Add variant
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Variants
                </span>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id ProductVariantNavigation-link-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      data-test-id="table-cell-avatar"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              clip-rule="evenodd"
                              d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
                              fill="currentColor"
                              fill-rule="evenodd"
                            />
                          </svg>
                        </div>
                        <div
                          class="Avatar-children-id"
                        />
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                      colspan="3"
                    >
                      <a
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        data-test-id="button-add-variant"
                        href="/products/variant/add"
                        role="button"
                        tabindex="0"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Add variant
                        </span>
                      </a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Variant Attributes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Attributes-cardContent-id"
            >
              <div
                class="Attributes-expansionBar-id"
              >
                <div
                  class="Attributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    0 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
                  data-test-id="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                </button>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Variant Selection Attributes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Attributes-cardContent-id"
            >
              <div
                class="Attributes-expansionBar-id"
              >
                <div
                  class="Attributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    0 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
                  data-test-id="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                </button>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Checkout limits
                  <div
                    class="MuiChip-root-id ProductVariantCheckoutSettings-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                    >
                      Preview
                    </span>
                  </div>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Limit quantity per checkout (optional)
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="none"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    min="1"
                    name="quantityLimitPerCustomer"
                    type="number"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Limit quantity per checkout (optional)
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
                >
                  Your customer won't be allowed to buy bigger quantity per checkout than shown here.
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Shipping
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Weight
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      disabled=""
                      min="0"
                      name="weight"
                      type="text"
                      value=""
                    />
                    <div
                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        kg
                      </div>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Weight
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Pricing
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                There is no channel to define prices for. You need to first add variant to channels to define prices.
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Inventory
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductStocks-skuInputContainer-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    SKU (Stock Keeping Unit)
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="sku"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          SKU (Stock Keeping Unit)
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      name="isPreorder"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Variant currently in preorder
                  <div
                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                    >
                      Preview
                    </span>
                  </div>
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      name="trackInventory"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Track Inventory
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    Active inventory tracking will automatically calculate changes of stock
                  </div>
                </span>
              </label>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id ProductStocks-quantityContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <div
                  class="ProductStocks-quantityHeader-id"
                >
                  <span>
                    Quantity
                  </span>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Assign this variant to a channel in the product channel manager to define warehouses allocation
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Products / Create product variant with errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Add variant
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Variants
                </span>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <a
                class="TableRowLink-link-id"
                href="/products/variant/pv75934"
              />
              <a
                class="TableRowLink-link-id"
                href="/products/variant/pv68615"
              />
              <table
                class="MuiTable-root-id"
              >
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder255x255.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder255x255.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        />
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                    >
                      Cordoba Oro
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder255x255.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder255x255.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        />
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                    >
                      silver
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                      colspan="3"
                    >
                      <a
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        data-test-id="button-add-variant"
                        href="/products/variant/add"
                        role="button"
                        tabindex="0"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Add variant
                        </span>
                      </a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Variant Attributes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Attributes-cardContent-id"
            >
              <div
                class="Attributes-expansionBar-id"
              >
                <div
                  class="Attributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    1 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
                  data-test-id="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Attachment
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    class="AttributeRow-fileField-id"
                  >
                    <div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                        data-test-id="button-upload-file"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Choose file
                        </span>
                      </button>
                    </div>
                    <div
                      class="MuiTypography-root-id FileUploadField-errorText-id MuiTypography-caption-id"
                    >
                      This field is required
                    </div>
                  </div>
                  <input
                    class="FileUploadField-fileField-id"
                    data-test-id="upload-file-input"
                    id="fileUpload"
                    name="attribute:Attachment"
                    type="file"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Variant Selection Attributes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Attributes-cardContent-id"
            >
              <div
                class="Attributes-expansionBar-id"
              >
                <div
                  class="Attributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    1 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
                  data-test-id="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Color
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-142-label"
                    class="SingleAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Value
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-142-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-142-input"
                          type="text"
                          value=""
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="SingleAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Value
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Checkout limits
                  <div
                    class="MuiChip-root-id ProductVariantCheckoutSettings-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                    >
                      Preview
                    </span>
                  </div>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Limit quantity per checkout (optional)
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="none"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    min="1"
                    name="quantityLimitPerCustomer"
                    type="number"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Limit quantity per checkout (optional)
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                >
                  Your customer won't be allowed to buy bigger quantity per checkout than shown here.
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Shipping
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Weight
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      name="weight"
                      type="text"
                      value=""
                    />
                    <div
                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        kg
                      </div>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Weight
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Pricing
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                There is no channel to define prices for. You need to first add variant to channels to define prices.
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Inventory
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductStocks-skuInputContainer-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                    data-shrink="false"
                  >
                    SKU (Stock Keeping Unit)
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="sku"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          SKU (Stock Keeping Unit)
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    A product with this SKU already exists
                  </p>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="isPreorder"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Variant currently in preorder
                  <div
                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                    >
                      Preview
                    </span>
                  </div>
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="trackInventory"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Track Inventory
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    Active inventory tracking will automatically calculate changes of stock
                  </div>
                </span>
              </label>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id ProductStocks-quantityContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <div
                  class="ProductStocks-quantityHeader-id"
                >
                  <span>
                    Quantity
                  </span>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Assign this variant to a channel in the product channel manager to define warehouses allocation
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Products / Export / Export settings errors 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Views / Products / Export / Export settings interactive 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Views / Products / Export / Export settings no products selected 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Views / Products / Product edit form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Ergonomic Plastic Bacon
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id Grid-richText-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Ergonomic Plastic Bacon"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Invalid value
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-description"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Description
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                />
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Product Rating
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="rating"
                      type="number"
                      value="100"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Product Rating
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductMedia-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Media
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="button-upload-image"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="ProductMedia-fileField-id"
                  id="fileUpload"
                  multiple=""
                  type="file"
                />
              </div>
            </div>
            <div
              class="ProductMedia-imageGridContainer-id"
            >
              <div
                class="ProductMedia-imageUpload-id ImageUpload-photosIconContainer-id"
                tabindex="0"
              />
              <div
                class="MuiCardContent-root-id"
              >
                <div
                  class="ProductMedia-root-id"
                >
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdEltYWdlOjE%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdEltYWdlOaE%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UPJvZHVjdEltYWdlOjV%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdEltYHdlOjX%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdIlnYWdlOjX%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Attributes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Attributes-cardContent-id"
            >
              <div
                class="Attributes-expansionBar-id"
              >
                <div
                  class="Attributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    2 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
                  data-test-id="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Borders
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-121-label"
                    class="SingleAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                        data-shrink="false"
                      >
                        Value
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="true"
                          aria-labelledby="downshift-121-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-121-input"
                          type="text"
                          value="portals"
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="SingleAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Value
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                      <p
                        class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                      >
                        Invalid value
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Legacy
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-122-label"
                    class="MultiAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Values
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-122-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-122-menu"
                          role="listbox"
                          type="text"
                          value=""
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="MultiAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Values
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                  <div
                    class="MultiAutocompleteSelectField-chipContainer-id"
                  >
                    <div
                      class="MultiAutocompleteSelectField-chip-id"
                    >
                      <div
                        class="MultiAutocompleteSelectField-chipInner-id"
                      >
                        <div
                          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                        >
                          Auto Loan Account
                        </div>
                        <button
                          class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                          data-test-id="remove"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Variants
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <a
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="button-add-variant"
                  href="/products/123/variant/add"
                  role="button"
                  tabindex="0"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create variant
                  </span>
                </a>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id ProductVariants-warehouseSelectContainer-id"
            >
              <div
                class="MuiTypography-root-id ProductVariants-warehouseLabel-id MuiTypography-body1-id"
              >
                Available inventory at:
              </div>
              <span
                class="LinkChoice-root-id ProductVariants-select-id"
                tabindex="0"
              >
                <a
                  class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                >
                  All Warehouses
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id LinkChoice-arrow-id MuiSvgIcon-colorPrimary-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <g
                      style="fill-rule:evenodd"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </g>
                  </svg>
                </a>
              </span>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <a
                class="TableRowLink-link-id"
                href="/products/p10171/variant/pv75934"
              />
              <a
                class="TableRowLink-link-id"
                href="/products/p10171/variant/pv68615"
              />
              <table
                class="MuiTable-root-id"
              >
                <colgroup>
                  <col
                    class="ProductVariants-colGrab-id"
                  />
                  <col />
                  <col
                    class="ProductVariants-colName-id"
                  />
                  <col
                    class="ProductVariants-colSku-id"
                  />
                  <col
                    class="ProductVariants-colPrice-id"
                  />
                  <col
                    class="ProductVariants-colInventory-id"
                  />
                  <col
                    class="ProductVariants-colActions-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id TableHead-dragRows-id MuiTableCell-paddingCheckbox-id"
                      scope="col"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colName-id"
                      scope="col"
                    >
                      Variant
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colInventory-id"
                      scope="col"
                    >
                      Inventory
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colActions-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-id"
                    data-test-id="product-variant-row"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
                      data-test-id="name"
                    >
                      Cordoba Oro
                      <span
                        class="ProductVariants-defaultVariant-id"
                      >
                        Default
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-test-id="sku"
                    >
                      87192-94370
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                      data-test-id="inventory"
                    >
                      In preorder
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
                      data-test-id="actions"
                    />
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-id"
                    data-test-id="product-variant-row"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
                      data-test-id="name"
                    >
                      silver
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-test-id="sku"
                    >
                      69055-15190
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                      data-test-id="inventory"
                    >
                      In preorder
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
                      data-test-id="actions"
                    >
                      <div
                        data-test-id="menu"
                      >
                        <button
                          aria-haspopup="true"
                          aria-label="More"
                          class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                          color="primary"
                          data-test-id="show-more-button"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              clip-rule="evenodd"
                              d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                              fill="currentColor"
                              fill-rule="evenodd"
                            />
                          </svg>
                        </button>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Search Engine Preview
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this product easier to find
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.id"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          100023123
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductOrganization-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Organize Product
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <a
                  class="Link-root-id Link-primary-id Link-noUnderline-id"
                  href="/product-types/pt76406"
                >
                  Versatile
                </a>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Configurable
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Yes
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-123-label"
                class="SingleAutocompleteSelectField-container-id"
                data-test-id="category"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                    data-shrink="false"
                  >
                    Category
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="true"
                      aria-labelledby="downshift-123-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-123-input"
                      type="text"
                      value="Apparel"
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Category
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Invalid value
                  </p>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-124-label"
                class="MultiAutocompleteSelectField-container-id"
                data-test-id="collections"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                    data-shrink="false"
                  >
                    Collections
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="true"
                      aria-labelledby="downshift-124-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-124-menu"
                      role="listbox"
                      testid="collection"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Collections
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Invalid value
                  </p>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              >
                <div
                  class="MultiAutocompleteSelectField-chip-id"
                >
                  <div
                    class="MultiAutocompleteSelectField-chipInner-id"
                  >
                    <div
                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                    >
                      Winter sale
                    </div>
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="collection-remove"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 1 out of 7 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Taxes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id ProductTaxes-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
                data-test-id="override-tax-type"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="changeTaxCode"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Override the product type's tax rate
                </span>
              </label>
              <hr
                class="Hr-root-id ProductTaxes-hr-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
                data-test-id="charge-taxes"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="chargeTaxes"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Charge taxes on this product
                </span>
              </label>
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-125-label"
                class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
                data-test-id="select-tax-type"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Tax Rate
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-125-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-125-input"
                      type="text"
                      value="standard"
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Tax Rate
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Ergonomic Plastic Bacon
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id Grid-richText-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Ergonomic Plastic Bacon"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-description"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Description
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                />
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Product Rating
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="rating"
                      type="number"
                      value="100"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Product Rating
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductMedia-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Media
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="button-upload-image"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="ProductMedia-fileField-id"
                  id="fileUpload"
                  multiple=""
                  type="file"
                />
              </div>
            </div>
            <div
              class="ProductMedia-imageGridContainer-id"
            >
              <div
                class="ProductMedia-imageUpload-id ImageUpload-photosIconContainer-id"
                tabindex="0"
              />
              <div
                class="MuiCardContent-root-id"
              >
                <div
                  class="ProductMedia-root-id"
                >
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdEltYWdlOjE%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdEltYWdlOaE%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UPJvZHVjdEltYWdlOjV%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdEltYHdlOjX%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdIlnYWdlOjX%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Attributes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Attributes-cardContent-id"
            >
              <div
                class="Attributes-expansionBar-id"
              >
                <div
                  class="Attributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    2 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
                  data-test-id="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Borders
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-136-label"
                    class="SingleAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Value
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-136-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-136-input"
                          type="text"
                          value="portals"
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="SingleAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Value
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Legacy
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-137-label"
                    class="MultiAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Values
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-137-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-137-menu"
                          role="listbox"
                          type="text"
                          value=""
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="MultiAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Values
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                  <div
                    class="MultiAutocompleteSelectField-chipContainer-id"
                  >
                    <div
                      class="MultiAutocompleteSelectField-chip-id"
                    >
                      <div
                        class="MultiAutocompleteSelectField-chipInner-id"
                      >
                        <div
                          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                        >
                          Auto Loan Account
                        </div>
                        <button
                          class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                          data-test-id="remove"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Variants
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <a
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  data-test-id="button-add-variant"
                  href="/products/123/variant/add"
                  role="button"
                  tabindex="-1"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create variant
                  </span>
                </a>
              </div>
            </div>
            <div
              class="MuiPaper-root-id MuiCard-root-id ProductVariants-alert-id Alert-root-id Alert-warning-id MuiPaper-elevation0-id MuiPaper-rounded-id"
              data-test="alert"
            >
              <div
                class="MuiCardContent-root-id"
              >
                <div
                  class="Alert-container-id"
                >
                  <div
                    class="Alert-icon-id"
                  >
                    <svg
                      class="Alert-warning-id"
                      fill="none"
                      height="40"
                      viewBox="0 0 40 40"
                      width="40"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <circle
                        cx="20"
                        cy="20"
                        fill="var(--background-paper)"
                        r="20"
                      />
                      <circle
                        cx="20"
                        cy="20"
                        r="14"
                        stroke="currentColor"
                        stroke-width="4"
                      />
                      <path
                        clip-rule="evenodd"
                        d="M19.5 11C18.6716 11 18 11.6716 18 12.5V20.5C18 21.3284 18.6716 22 19.5 22H20.5C21.3284 22 22 21.3284 22 20.5V12.5C22 11.6716 21.3284 11 20.5 11H19.5ZM19.5 25C18.6716 25 18 25.6716 18 26.5V27.5C18 28.3284 18.6716 29 19.5 29H20.5C21.3284 29 22 28.3284 22 27.5V26.5C22 25.6716 21.3284 25 20.5 25H19.5Z"
                        fill="currentColor"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </div>
                  <div
                    class="Alert-content-id"
                  >
                    <div
                      class="Alert-titleBar-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-h5-id"
                      >
                        SKU limit reached
                      </div>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id Alert-close-id"
                        data-test="close"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="25"
                          viewBox="0 0 24 25"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            clip-rule="evenodd"
                            d="M7.53 6.472a.75.75 0 1 0-1.06 1.06l4.47 4.47-4.47 4.47a.75.75 0 0 0 1.06 1.06l4.47-4.47 4.47 4.47a.75.75 0 1 0 1.06-1.06l-4.47-4.47 4.47-4.47a.75.75 0 0 0-1.06-1.06L12 10.942l-4.47-4.47Z"
                            fill="currentColor"
                            fill-rule="evenodd"
                          />
                        </svg>
                      </button>
                    </div>
                    You have reached your SKU limit, you will be no longer able to add SKUs to your store. If you would like to up your limit, contact your administration staff about raising your limits.
                  </div>
                </div>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id ProductVariants-warehouseSelectContainer-id"
            >
              <div
                class="MuiTypography-root-id ProductVariants-warehouseLabel-id MuiTypography-body1-id"
              >
                Available inventory at:
              </div>
              <span
                class="LinkChoice-root-id ProductVariants-select-id"
                tabindex="0"
              >
                <a
                  class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                >
                  All Warehouses
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id LinkChoice-arrow-id MuiSvgIcon-colorPrimary-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <g
                      style="fill-rule:evenodd"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </g>
                  </svg>
                </a>
              </span>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <a
                class="TableRowLink-link-id"
                href="/products/p10171/variant/pv75934"
              />
              <a
                class="TableRowLink-link-id"
                href="/products/p10171/variant/pv68615"
              />
              <table
                class="MuiTable-root-id"
              >
                <colgroup>
                  <col
                    class="ProductVariants-colGrab-id"
                  />
                  <col />
                  <col
                    class="ProductVariants-colName-id"
                  />
                  <col
                    class="ProductVariants-colSku-id"
                  />
                  <col
                    class="ProductVariants-colPrice-id"
                  />
                  <col
                    class="ProductVariants-colInventory-id"
                  />
                  <col
                    class="ProductVariants-colActions-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id TableHead-dragRows-id MuiTableCell-paddingCheckbox-id"
                      scope="col"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colName-id"
                      scope="col"
                    >
                      Variant
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colInventory-id"
                      scope="col"
                    >
                      Inventory
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colActions-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-id"
                    data-test-id="product-variant-row"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
                      data-test-id="name"
                    >
                      Cordoba Oro
                      <span
                        class="ProductVariants-defaultVariant-id"
                      >
                        Default
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-test-id="sku"
                    >
                      87192-94370
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                      data-test-id="inventory"
                    >
                      In preorder
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
                      data-test-id="actions"
                    />
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-id"
                    data-test-id="product-variant-row"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
                      data-test-id="name"
                    >
                      silver
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-test-id="sku"
                    >
                      69055-15190
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                      data-test-id="inventory"
                    >
                      In preorder
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
                      data-test-id="actions"
                    >
                      <div
                        data-test-id="menu"
                      >
                        <button
                          aria-haspopup="true"
                          aria-label="More"
                          class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                          color="primary"
                          data-test-id="show-more-button"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              clip-rule="evenodd"
                              d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                              fill="currentColor"
                              fill-rule="evenodd"
                            />
                          </svg>
                        </button>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Search Engine Preview
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this product easier to find
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.id"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          100023123
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductOrganization-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Organize Product
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <a
                  class="Link-root-id Link-primary-id Link-noUnderline-id"
                  href="/product-types/pt76406"
                >
                  Versatile
                </a>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Configurable
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Yes
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-138-label"
                class="SingleAutocompleteSelectField-container-id"
                data-test-id="category"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Category
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-138-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-138-input"
                      type="text"
                      value="Apparel"
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Category
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-139-label"
                class="MultiAutocompleteSelectField-container-id"
                data-test-id="collections"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Collections
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-139-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-139-menu"
                      role="listbox"
                      testid="collection"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Collections
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                  >
                    *Optional. Adding product to collection helps users find it.
                  </p>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              >
                <div
                  class="MultiAutocompleteSelectField-chip-id"
                >
                  <div
                    class="MultiAutocompleteSelectField-chipInner-id"
                  >
                    <div
                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                    >
                      Winter sale
                    </div>
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="collection-remove"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 1 out of 7 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Taxes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id ProductTaxes-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
                data-test-id="override-tax-type"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="changeTaxCode"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Override the product type's tax rate
                </span>
              </label>
              <hr
                class="Hr-root-id ProductTaxes-hr-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
                data-test-id="charge-taxes"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="chargeTaxes"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Charge taxes on this product
                </span>
              </label>
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-140-label"
                class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
                data-test-id="select-tax-type"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Tax Rate
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-140-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-140-input"
                      type="text"
                      value="standard"
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Tax Rate
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Products / Product edit no limits 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Ergonomic Plastic Bacon
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id Grid-richText-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Ergonomic Plastic Bacon"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-description"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Description
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                />
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Product Rating
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="rating"
                      type="number"
                      value="100"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Product Rating
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductMedia-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Media
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="button-upload-image"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="ProductMedia-fileField-id"
                  id="fileUpload"
                  multiple=""
                  type="file"
                />
              </div>
            </div>
            <div
              class="ProductMedia-imageGridContainer-id"
            >
              <div
                class="ProductMedia-imageUpload-id ImageUpload-photosIconContainer-id"
                tabindex="0"
              />
              <div
                class="MuiCardContent-root-id"
              >
                <div
                  class="ProductMedia-root-id"
                >
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdEltYWdlOjE%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdEltYWdlOaE%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UPJvZHVjdEltYWdlOjV%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdEltYHdlOjX%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdIlnYWdlOjX%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Attributes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Attributes-cardContent-id"
            >
              <div
                class="Attributes-expansionBar-id"
              >
                <div
                  class="Attributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    2 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
                  data-test-id="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Borders
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-131-label"
                    class="SingleAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Value
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-131-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-131-input"
                          type="text"
                          value="portals"
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="SingleAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Value
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Legacy
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-132-label"
                    class="MultiAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Values
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-132-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-132-menu"
                          role="listbox"
                          type="text"
                          value=""
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="MultiAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Values
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                  <div
                    class="MultiAutocompleteSelectField-chipContainer-id"
                  >
                    <div
                      class="MultiAutocompleteSelectField-chip-id"
                    >
                      <div
                        class="MultiAutocompleteSelectField-chipInner-id"
                      >
                        <div
                          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                        >
                          Auto Loan Account
                        </div>
                        <button
                          class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                          data-test-id="remove"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Variants
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <a
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="button-add-variant"
                  href="/products/123/variant/add"
                  role="button"
                  tabindex="0"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create variant
                  </span>
                </a>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id ProductVariants-warehouseSelectContainer-id"
            >
              <div
                class="MuiTypography-root-id ProductVariants-warehouseLabel-id MuiTypography-body1-id"
              >
                Available inventory at:
              </div>
              <span
                class="LinkChoice-root-id ProductVariants-select-id"
                tabindex="0"
              >
                <a
                  class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                >
                  All Warehouses
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id LinkChoice-arrow-id MuiSvgIcon-colorPrimary-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <g
                      style="fill-rule:evenodd"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </g>
                  </svg>
                </a>
              </span>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <a
                class="TableRowLink-link-id"
                href="/products/p10171/variant/pv75934"
              />
              <a
                class="TableRowLink-link-id"
                href="/products/p10171/variant/pv68615"
              />
              <table
                class="MuiTable-root-id"
              >
                <colgroup>
                  <col
                    class="ProductVariants-colGrab-id"
                  />
                  <col />
                  <col
                    class="ProductVariants-colName-id"
                  />
                  <col
                    class="ProductVariants-colSku-id"
                  />
                  <col
                    class="ProductVariants-colPrice-id"
                  />
                  <col
                    class="ProductVariants-colInventory-id"
                  />
                  <col
                    class="ProductVariants-colActions-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id TableHead-dragRows-id MuiTableCell-paddingCheckbox-id"
                      scope="col"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colName-id"
                      scope="col"
                    >
                      Variant
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colInventory-id"
                      scope="col"
                    >
                      Inventory
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colActions-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-id"
                    data-test-id="product-variant-row"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
                      data-test-id="name"
                    >
                      Cordoba Oro
                      <span
                        class="ProductVariants-defaultVariant-id"
                      >
                        Default
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-test-id="sku"
                    >
                      87192-94370
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                      data-test-id="inventory"
                    >
                      In preorder
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
                      data-test-id="actions"
                    />
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-id"
                    data-test-id="product-variant-row"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
                      data-test-id="name"
                    >
                      silver
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-test-id="sku"
                    >
                      69055-15190
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                      data-test-id="inventory"
                    >
                      In preorder
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
                      data-test-id="actions"
                    >
                      <div
                        data-test-id="menu"
                      >
                        <button
                          aria-haspopup="true"
                          aria-label="More"
                          class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                          color="primary"
                          data-test-id="show-more-button"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              clip-rule="evenodd"
                              d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                              fill="currentColor"
                              fill-rule="evenodd"
                            />
                          </svg>
                        </button>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Search Engine Preview
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this product easier to find
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.id"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          100023123
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductOrganization-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Organize Product
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <a
                  class="Link-root-id Link-primary-id Link-noUnderline-id"
                  href="/product-types/pt76406"
                >
                  Versatile
                </a>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Configurable
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Yes
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-133-label"
                class="SingleAutocompleteSelectField-container-id"
                data-test-id="category"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Category
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-133-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-133-input"
                      type="text"
                      value="Apparel"
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Category
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-134-label"
                class="MultiAutocompleteSelectField-container-id"
                data-test-id="collections"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Collections
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-134-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-134-menu"
                      role="listbox"
                      testid="collection"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Collections
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                  >
                    *Optional. Adding product to collection helps users find it.
                  </p>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              >
                <div
                  class="MultiAutocompleteSelectField-chip-id"
                >
                  <div
                    class="MultiAutocompleteSelectField-chipInner-id"
                  >
                    <div
                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                    >
                      Winter sale
                    </div>
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="collection-remove"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 1 out of 7 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Taxes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id ProductTaxes-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
                data-test-id="override-tax-type"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="changeTaxCode"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Override the product type's tax rate
                </span>
              </label>
              <hr
                class="Hr-root-id ProductTaxes-hr-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
                data-test-id="charge-taxes"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="chargeTaxes"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Charge taxes on this product
                </span>
              </label>
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-135-label"
                class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
                data-test-id="select-tax-type"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Tax Rate
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-135-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-135-input"
                      type="text"
                      value="standard"
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Tax Rate
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Products / Product edit no product attributes 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Ergonomic Plastic Bacon
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id Grid-richText-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Ergonomic Plastic Bacon"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-description"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Description
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                />
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Product Rating
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="rating"
                      type="number"
                      value="100"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Product Rating
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductMedia-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Media
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="button-upload-image"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="ProductMedia-fileField-id"
                  id="fileUpload"
                  multiple=""
                  type="file"
                />
              </div>
            </div>
            <div
              class="ProductMedia-imageGridContainer-id"
            >
              <div
                class="ProductMedia-imageUpload-id ImageUpload-photosIconContainer-id"
                tabindex="0"
              />
              <div
                class="MuiCardContent-root-id"
              >
                <div
                  class="ProductMedia-root-id"
                >
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdEltYWdlOjE%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdEltYWdlOaE%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UPJvZHVjdEltYWdlOjV%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdEltYHdlOjX%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdIlnYWdlOjX%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Variants
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <a
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="button-add-variant"
                  href="/products/123/variant/add"
                  role="button"
                  tabindex="0"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create variant
                  </span>
                </a>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id ProductVariants-warehouseSelectContainer-id"
            >
              <div
                class="MuiTypography-root-id ProductVariants-warehouseLabel-id MuiTypography-body1-id"
              >
                Available inventory at:
              </div>
              <span
                class="LinkChoice-root-id ProductVariants-select-id"
                tabindex="0"
              >
                <a
                  class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                >
                  All Warehouses
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id LinkChoice-arrow-id MuiSvgIcon-colorPrimary-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <g
                      style="fill-rule:evenodd"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </g>
                  </svg>
                </a>
              </span>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <a
                class="TableRowLink-link-id"
                href="/products/p10171/variant/pv75934"
              />
              <a
                class="TableRowLink-link-id"
                href="/products/p10171/variant/pv68615"
              />
              <table
                class="MuiTable-root-id"
              >
                <colgroup>
                  <col
                    class="ProductVariants-colGrab-id"
                  />
                  <col />
                  <col
                    class="ProductVariants-colName-id"
                  />
                  <col
                    class="ProductVariants-colSku-id"
                  />
                  <col
                    class="ProductVariants-colPrice-id"
                  />
                  <col
                    class="ProductVariants-colInventory-id"
                  />
                  <col
                    class="ProductVariants-colActions-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id TableHead-dragRows-id MuiTableCell-paddingCheckbox-id"
                      scope="col"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colName-id"
                      scope="col"
                    >
                      Variant
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colInventory-id"
                      scope="col"
                    >
                      Inventory
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colActions-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-id"
                    data-test-id="product-variant-row"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
                      data-test-id="name"
                    >
                      Cordoba Oro
                      <span
                        class="ProductVariants-defaultVariant-id"
                      >
                        Default
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-test-id="sku"
                    >
                      87192-94370
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                      data-test-id="inventory"
                    >
                      In preorder
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
                      data-test-id="actions"
                    />
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-id"
                    data-test-id="product-variant-row"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
                      data-test-id="name"
                    >
                      silver
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-test-id="sku"
                    >
                      69055-15190
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                      data-test-id="inventory"
                    >
                      In preorder
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
                      data-test-id="actions"
                    >
                      <div
                        data-test-id="menu"
                      >
                        <button
                          aria-haspopup="true"
                          aria-label="More"
                          class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                          color="primary"
                          data-test-id="show-more-button"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              clip-rule="evenodd"
                              d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                              fill="currentColor"
                              fill-rule="evenodd"
                            />
                          </svg>
                        </button>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Search Engine Preview
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this product easier to find
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.id"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          100023123
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductOrganization-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Organize Product
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <a
                  class="Link-root-id Link-primary-id Link-noUnderline-id"
                  href="/product-types/pt76406"
                >
                  Versatile
                </a>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Configurable
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Yes
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-118-label"
                class="SingleAutocompleteSelectField-container-id"
                data-test-id="category"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Category
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-118-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-118-input"
                      type="text"
                      value="Apparel"
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Category
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-119-label"
                class="MultiAutocompleteSelectField-container-id"
                data-test-id="collections"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Collections
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-119-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-119-menu"
                      role="listbox"
                      testid="collection"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Collections
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                  >
                    *Optional. Adding product to collection helps users find it.
                  </p>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              >
                <div
                  class="MultiAutocompleteSelectField-chip-id"
                >
                  <div
                    class="MultiAutocompleteSelectField-chipInner-id"
                  >
                    <div
                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                    >
                      Winter sale
                    </div>
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="collection-remove"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 1 out of 7 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Taxes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id ProductTaxes-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
                data-test-id="override-tax-type"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="changeTaxCode"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Override the product type's tax rate
                </span>
              </label>
              <hr
                class="Hr-root-id ProductTaxes-hr-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
                data-test-id="charge-taxes"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="chargeTaxes"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Charge taxes on this product
                </span>
              </label>
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-120-label"
                class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
                data-test-id="select-tax-type"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Tax Rate
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-120-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-120-input"
                      type="text"
                      value="standard"
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Tax Rate
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Products / Product edit no stock and no variants 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Ergonomic Plastic Bacon
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id Grid-richText-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Ergonomic Plastic Bacon"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-description"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Description
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                />
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Product Rating
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="rating"
                      type="number"
                      value="100"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Product Rating
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductMedia-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Media
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="button-upload-image"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="ProductMedia-fileField-id"
                  id="fileUpload"
                  multiple=""
                  type="file"
                />
              </div>
            </div>
            <div
              class="ProductMedia-imageGridContainer-id"
            >
              <div
                class="ProductMedia-imageUpload-id ImageUpload-photosIconContainer-id"
                tabindex="0"
              />
              <div
                class="MuiCardContent-root-id"
              >
                <div
                  class="ProductMedia-root-id"
                >
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdEltYWdlOjE%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdEltYWdlOaE%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UPJvZHVjdEltYWdlOjV%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdEltYHdlOjX%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdIlnYWdlOjX%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Attributes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Attributes-cardContent-id"
            >
              <div
                class="Attributes-expansionBar-id"
              >
                <div
                  class="Attributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    2 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
                  data-test-id="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Borders
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-108-label"
                    class="SingleAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Value
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-108-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-108-input"
                          type="text"
                          value="portals"
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="SingleAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Value
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Legacy
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-109-label"
                    class="MultiAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Values
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-109-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-109-menu"
                          role="listbox"
                          type="text"
                          value=""
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="MultiAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Values
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                  <div
                    class="MultiAutocompleteSelectField-chipContainer-id"
                  >
                    <div
                      class="MultiAutocompleteSelectField-chip-id"
                    >
                      <div
                        class="MultiAutocompleteSelectField-chipInner-id"
                      >
                        <div
                          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                        >
                          Auto Loan Account
                        </div>
                        <button
                          class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                          data-test-id="remove"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Shipping
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Weight
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      name="weight"
                      type="text"
                      value="5"
                    />
                    <div
                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        KG
                      </div>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Weight
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Inventory
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductStocks-skuInputContainer-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    SKU (Stock Keeping Unit)
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="sku"
                      type="text"
                      value="87192-94370"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          SKU (Stock Keeping Unit)
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="isPreorder"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Variant currently in preorder
                  <div
                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                    >
                      Preview
                    </span>
                  </div>
                </span>
              </label>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id ProductStocks-caption-id MuiTypography-caption-id"
              >
                Set up an end date of preorder. When end date will be reached product will be automatically taken from preorder to standard selling
              </div>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                name="hasPreorderEndDate"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  SETUP END DATE
                </span>
              </button>
              <div
                class="MuiTypography-root-id ProductStocks-preorderLimitInfo-id MuiTypography-caption-id"
              >
                Preordered products will be available in all warehouses. You can set a threshold for sold quantity. Leaving input blank will be interpreted as no limit to sale. Sold items will be allocated at the warehouse assigned to chosen shipping zone.
              </div>
              <div
                class="ProductStocks-thresholdRow-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id ProductStocks-thresholdInput-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Global threshold
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      name="globalThreshold"
                      type="text"
                      value="0"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Global threshold
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                  >
                    Threshold that cannot be exceeded even if per channel thresholds are still available
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Search Engine Preview
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this product easier to find
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.id"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          100023123
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductOrganization-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Organize Product
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <a
                  class="Link-root-id Link-primary-id Link-noUnderline-id"
                  href="/product-types/pt76406"
                >
                  Versatile
                </a>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Configurable
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                No
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-110-label"
                class="SingleAutocompleteSelectField-container-id"
                data-test-id="category"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Category
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-110-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-110-input"
                      type="text"
                      value="Apparel"
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Category
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-111-label"
                class="MultiAutocompleteSelectField-container-id"
                data-test-id="collections"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Collections
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-111-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-111-menu"
                      role="listbox"
                      testid="collection"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Collections
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                  >
                    *Optional. Adding product to collection helps users find it.
                  </p>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              >
                <div
                  class="MultiAutocompleteSelectField-chip-id"
                >
                  <div
                    class="MultiAutocompleteSelectField-chipInner-id"
                  >
                    <div
                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                    >
                      Winter sale
                    </div>
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="collection-remove"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 1 out of 7 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Taxes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id ProductTaxes-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
                data-test-id="override-tax-type"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="changeTaxCode"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Override the product type's tax rate
                </span>
              </label>
              <hr
                class="Hr-root-id ProductTaxes-hr-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
                data-test-id="charge-taxes"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="chargeTaxes"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Charge taxes on this product
                </span>
              </label>
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-112-label"
                class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
                data-test-id="select-tax-type"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Tax Rate
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-112-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-112-input"
                      type="text"
                      value="standard"
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Tax Rate
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Products / Product edit no stock, no variants and no warehouses 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Ergonomic Plastic Bacon
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id Grid-richText-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Ergonomic Plastic Bacon"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-description"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Description
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                />
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Product Rating
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="rating"
                      type="number"
                      value="100"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Product Rating
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductMedia-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Media
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="button-upload-image"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="ProductMedia-fileField-id"
                  id="fileUpload"
                  multiple=""
                  type="file"
                />
              </div>
            </div>
            <div
              class="ProductMedia-imageGridContainer-id"
            >
              <div
                class="ProductMedia-imageUpload-id ImageUpload-photosIconContainer-id"
                tabindex="0"
              />
              <div
                class="MuiCardContent-root-id"
              >
                <div
                  class="ProductMedia-root-id"
                >
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdEltYWdlOjE%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdEltYWdlOaE%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UPJvZHVjdEltYWdlOjV%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdEltYHdlOjX%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdIlnYWdlOjX%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Attributes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Attributes-cardContent-id"
            >
              <div
                class="Attributes-expansionBar-id"
              >
                <div
                  class="Attributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    2 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
                  data-test-id="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Borders
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-113-label"
                    class="SingleAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Value
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-113-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-113-input"
                          type="text"
                          value="portals"
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="SingleAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Value
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Legacy
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-114-label"
                    class="MultiAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Values
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-114-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-114-menu"
                          role="listbox"
                          type="text"
                          value=""
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="MultiAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Values
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                  <div
                    class="MultiAutocompleteSelectField-chipContainer-id"
                  >
                    <div
                      class="MultiAutocompleteSelectField-chip-id"
                    >
                      <div
                        class="MultiAutocompleteSelectField-chipInner-id"
                      >
                        <div
                          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                        >
                          Auto Loan Account
                        </div>
                        <button
                          class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                          data-test-id="remove"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Shipping
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Weight
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      name="weight"
                      type="text"
                      value="5"
                    />
                    <div
                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        KG
                      </div>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Weight
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Inventory
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductStocks-skuInputContainer-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    SKU (Stock Keeping Unit)
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="sku"
                      type="text"
                      value="87192-94370"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          SKU (Stock Keeping Unit)
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="isPreorder"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Variant currently in preorder
                  <div
                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                    >
                      Preview
                    </span>
                  </div>
                </span>
              </label>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id ProductStocks-caption-id MuiTypography-caption-id"
              >
                Set up an end date of preorder. When end date will be reached product will be automatically taken from preorder to standard selling
              </div>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                name="hasPreorderEndDate"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  SETUP END DATE
                </span>
              </button>
              <div
                class="MuiTypography-root-id ProductStocks-preorderLimitInfo-id MuiTypography-caption-id"
              >
                Preordered products will be available in all warehouses. You can set a threshold for sold quantity. Leaving input blank will be interpreted as no limit to sale. Sold items will be allocated at the warehouse assigned to chosen shipping zone.
              </div>
              <div
                class="ProductStocks-thresholdRow-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id ProductStocks-thresholdInput-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Global threshold
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      name="globalThreshold"
                      type="text"
                      value="0"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Global threshold
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                  >
                    Threshold that cannot be exceeded even if per channel thresholds are still available
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Search Engine Preview
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this product easier to find
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.id"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          100023123
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductOrganization-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Organize Product
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <a
                  class="Link-root-id Link-primary-id Link-noUnderline-id"
                  href="/product-types/pt76406"
                >
                  Versatile
                </a>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Configurable
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                No
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-115-label"
                class="SingleAutocompleteSelectField-container-id"
                data-test-id="category"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Category
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-115-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-115-input"
                      type="text"
                      value="Apparel"
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Category
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-116-label"
                class="MultiAutocompleteSelectField-container-id"
                data-test-id="collections"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Collections
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-116-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-116-menu"
                      role="listbox"
                      testid="collection"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Collections
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                  >
                    *Optional. Adding product to collection helps users find it.
                  </p>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              >
                <div
                  class="MultiAutocompleteSelectField-chip-id"
                >
                  <div
                    class="MultiAutocompleteSelectField-chipInner-id"
                  >
                    <div
                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                    >
                      Winter sale
                    </div>
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="collection-remove"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 1 out of 7 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Taxes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id ProductTaxes-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
                data-test-id="override-tax-type"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="changeTaxCode"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Override the product type's tax rate
                </span>
              </label>
              <hr
                class="Hr-root-id ProductTaxes-hr-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
                data-test-id="charge-taxes"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="chargeTaxes"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Charge taxes on this product
                </span>
              </label>
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-117-label"
                class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
                data-test-id="select-tax-type"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Tax Rate
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-117-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-117-input"
                      type="text"
                      value="standard"
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Tax Rate
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Products / Product edit no variants 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Ergonomic Plastic Bacon
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id Grid-richText-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Ergonomic Plastic Bacon"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-description"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Description
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                />
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Product Rating
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="rating"
                      type="number"
                      value="100"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Product Rating
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductMedia-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Media
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="button-upload-image"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="ProductMedia-fileField-id"
                  id="fileUpload"
                  multiple=""
                  type="file"
                />
              </div>
            </div>
            <div
              class="ProductMedia-imageGridContainer-id"
            >
              <div
                class="ProductMedia-imageUpload-id ImageUpload-photosIconContainer-id"
                tabindex="0"
              />
              <div
                class="MuiCardContent-root-id"
              >
                <div
                  class="ProductMedia-root-id"
                >
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdEltYWdlOjE%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdEltYWdlOaE%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UPJvZHVjdEltYWdlOjV%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdEltYHdlOjX%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdIlnYWdlOjX%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Attributes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Attributes-cardContent-id"
            >
              <div
                class="Attributes-expansionBar-id"
              >
                <div
                  class="Attributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    2 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
                  data-test-id="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Borders
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-103-label"
                    class="SingleAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Value
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-103-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-103-input"
                          type="text"
                          value="portals"
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="SingleAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Value
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Legacy
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-104-label"
                    class="MultiAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Values
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-104-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-104-menu"
                          role="listbox"
                          type="text"
                          value=""
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="MultiAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Values
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                  <div
                    class="MultiAutocompleteSelectField-chipContainer-id"
                  >
                    <div
                      class="MultiAutocompleteSelectField-chip-id"
                    >
                      <div
                        class="MultiAutocompleteSelectField-chipInner-id"
                      >
                        <div
                          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                        >
                          Auto Loan Account
                        </div>
                        <button
                          class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                          data-test-id="remove"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Shipping
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Weight
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      name="weight"
                      type="text"
                      value="5"
                    />
                    <div
                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        KG
                      </div>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Weight
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Inventory
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductStocks-skuInputContainer-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    SKU (Stock Keeping Unit)
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="sku"
                      type="text"
                      value="87192-94370"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          SKU (Stock Keeping Unit)
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="isPreorder"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Variant currently in preorder
                  <div
                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                    >
                      Preview
                    </span>
                  </div>
                </span>
              </label>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id ProductStocks-caption-id MuiTypography-caption-id"
              >
                Set up an end date of preorder. When end date will be reached product will be automatically taken from preorder to standard selling
              </div>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                name="hasPreorderEndDate"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  SETUP END DATE
                </span>
              </button>
              <div
                class="MuiTypography-root-id ProductStocks-preorderLimitInfo-id MuiTypography-caption-id"
              >
                Preordered products will be available in all warehouses. You can set a threshold for sold quantity. Leaving input blank will be interpreted as no limit to sale. Sold items will be allocated at the warehouse assigned to chosen shipping zone.
              </div>
              <div
                class="ProductStocks-thresholdRow-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id ProductStocks-thresholdInput-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Global threshold
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      name="globalThreshold"
                      type="text"
                      value="0"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Global threshold
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                  >
                    Threshold that cannot be exceeded even if per channel thresholds are still available
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Search Engine Preview
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this product easier to find
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.id"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          100023123
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductOrganization-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Organize Product
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <a
                  class="Link-root-id Link-primary-id Link-noUnderline-id"
                  href="/product-types/pt76406"
                >
                  Versatile
                </a>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Configurable
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                No
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-105-label"
                class="SingleAutocompleteSelectField-container-id"
                data-test-id="category"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Category
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-105-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-105-input"
                      type="text"
                      value="Apparel"
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Category
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-106-label"
                class="MultiAutocompleteSelectField-container-id"
                data-test-id="collections"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Collections
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-106-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-106-menu"
                      role="listbox"
                      testid="collection"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Collections
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                  >
                    *Optional. Adding product to collection helps users find it.
                  </p>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              >
                <div
                  class="MultiAutocompleteSelectField-chip-id"
                >
                  <div
                    class="MultiAutocompleteSelectField-chipInner-id"
                  >
                    <div
                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                    >
                      Winter sale
                    </div>
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="collection-remove"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 1 out of 7 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Taxes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id ProductTaxes-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
                data-test-id="override-tax-type"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="changeTaxCode"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Override the product type's tax rate
                </span>
              </label>
              <hr
                class="Hr-root-id ProductTaxes-hr-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
                data-test-id="charge-taxes"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="chargeTaxes"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Charge taxes on this product
                </span>
              </label>
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-107-label"
                class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
                data-test-id="select-tax-type"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Tax Rate
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-107-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-107-input"
                      type="text"
                      value="standard"
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Tax Rate
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Ergonomic Plastic Bacon
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id Grid-richText-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Ergonomic Plastic Bacon"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-description"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Description
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                />
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Product Rating
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="rating"
                      type="number"
                      value="100"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Product Rating
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductMedia-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Media
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="button-upload-image"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="ProductMedia-fileField-id"
                  id="fileUpload"
                  multiple=""
                  type="file"
                />
              </div>
            </div>
            <div
              class="ProductMedia-imageGridContainer-id"
            >
              <div
                class="ProductMedia-imageUpload-id ImageUpload-photosIconContainer-id"
                tabindex="0"
              />
              <div
                class="MuiCardContent-root-id"
              >
                <div
                  class="ProductMedia-root-id"
                >
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdEltYWdlOjE%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdEltYWdlOaE%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UPJvZHVjdEltYWdlOjV%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdEltYHdlOjX%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdIlnYWdlOjX%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Attributes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Attributes-cardContent-id"
            >
              <div
                class="Attributes-expansionBar-id"
              >
                <div
                  class="Attributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    2 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
                  data-test-id="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Borders
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-86-label"
                    class="SingleAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Value
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-86-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-86-input"
                          type="text"
                          value="portals"
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="SingleAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Value
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Legacy
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-87-label"
                    class="MultiAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Values
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-87-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-87-menu"
                          role="listbox"
                          type="text"
                          value=""
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="MultiAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Values
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                  <div
                    class="MultiAutocompleteSelectField-chipContainer-id"
                  >
                    <div
                      class="MultiAutocompleteSelectField-chip-id"
                    >
                      <div
                        class="MultiAutocompleteSelectField-chipInner-id"
                      >
                        <div
                          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                        >
                          Auto Loan Account
                        </div>
                        <button
                          class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                          data-test-id="remove"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Variants
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <a
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="button-add-variant"
                  href="/products/123/variant/add"
                  role="button"
                  tabindex="0"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create variant
                  </span>
                </a>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id ProductVariants-warehouseSelectContainer-id"
            >
              <div
                class="MuiTypography-root-id ProductVariants-warehouseLabel-id MuiTypography-body1-id"
              >
                Available inventory at:
              </div>
              <span
                class="LinkChoice-root-id ProductVariants-select-id"
                tabindex="0"
              >
                <a
                  class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                >
                  All Warehouses
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id LinkChoice-arrow-id MuiSvgIcon-colorPrimary-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <g
                      style="fill-rule:evenodd"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </g>
                  </svg>
                </a>
              </span>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <a
                class="TableRowLink-link-id"
                href="/products/p10171/variant/pv75934"
              />
              <a
                class="TableRowLink-link-id"
                href="/products/p10171/variant/pv68615"
              />
              <table
                class="MuiTable-root-id"
              >
                <colgroup>
                  <col
                    class="ProductVariants-colGrab-id"
                  />
                  <col />
                  <col
                    class="ProductVariants-colName-id"
                  />
                  <col
                    class="ProductVariants-colSku-id"
                  />
                  <col
                    class="ProductVariants-colPrice-id"
                  />
                  <col
                    class="ProductVariants-colInventory-id"
                  />
                  <col
                    class="ProductVariants-colActions-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id TableHead-dragRows-id MuiTableCell-paddingCheckbox-id"
                      scope="col"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colName-id"
                      scope="col"
                    >
                      Variant
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colInventory-id"
                      scope="col"
                    >
                      Inventory
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colActions-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-id"
                    data-test-id="product-variant-row"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
                      data-test-id="name"
                    >
                      Cordoba Oro
                      <span
                        class="ProductVariants-defaultVariant-id"
                      >
                        Default
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-test-id="sku"
                    >
                      87192-94370
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                      data-test-id="inventory"
                    >
                      In preorder
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
                      data-test-id="actions"
                    />
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-id"
                    data-test-id="product-variant-row"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
                      data-test-id="name"
                    >
                      silver
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-test-id="sku"
                    >
                      69055-15190
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                      data-test-id="inventory"
                    >
                      In preorder
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
                      data-test-id="actions"
                    >
                      <div
                        data-test-id="menu"
                      >
                        <button
                          aria-haspopup="true"
                          aria-label="More"
                          class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                          color="primary"
                          data-test-id="show-more-button"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              clip-rule="evenodd"
                              d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                              fill="currentColor"
                              fill-rule="evenodd"
                            />
                          </svg>
                        </button>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Search Engine Preview
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this product easier to find
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.id"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          100023123
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductOrganization-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Organize Product
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <a
                  class="Link-root-id Link-primary-id Link-noUnderline-id"
                  href="/product-types/pt76406"
                >
                  Versatile
                </a>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Configurable
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Yes
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-88-label"
                class="SingleAutocompleteSelectField-container-id"
                data-test-id="category"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Category
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-88-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-88-input"
                      type="text"
                      value="Apparel"
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Category
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-89-label"
                class="MultiAutocompleteSelectField-container-id"
                data-test-id="collections"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Collections
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-89-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-89-menu"
                      role="listbox"
                      testid="collection"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Collections
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                  >
                    *Optional. Adding product to collection helps users find it.
                  </p>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              >
                <div
                  class="MultiAutocompleteSelectField-chip-id"
                >
                  <div
                    class="MultiAutocompleteSelectField-chipInner-id"
                  >
                    <div
                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                    >
                      Winter sale
                    </div>
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="collection-remove"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 1 out of 7 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Taxes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id ProductTaxes-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
                data-test-id="override-tax-type"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="changeTaxCode"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Override the product type's tax rate
                </span>
              </label>
              <hr
                class="Hr-root-id ProductTaxes-hr-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
                data-test-id="charge-taxes"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="chargeTaxes"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Charge taxes on this product
                </span>
              </label>
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-90-label"
                class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
                data-test-id="select-tax-type"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Tax Rate
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-90-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-90-input"
                      type="text"
                      value="standard"
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Tax Rate
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
              style="width:10em"
            >
              ‌
            </span>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id Grid-richText-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-description"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Description
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
                />
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Product Rating
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="rating"
                      type="number"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Product Rating
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductMedia-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Media
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="button-upload-image"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="ProductMedia-fileField-id"
                  id="fileUpload"
                  multiple=""
                  type="file"
                />
              </div>
            </div>
            <div
              class="ProductMedia-imageGridContainer-id"
            >
              <div
                class="MuiCardContent-root-id"
              >
                <div
                  class="ProductMedia-root-id"
                >
                  <div
                    class="ProductMedia-imageContainer-id"
                  >
                    <img
                      class="ProductMedia-image-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Shipping
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Weight
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      disabled=""
                      min="0"
                      name="weight"
                      type="text"
                      value=""
                    />
                    <div
                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        kg
                      </div>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Weight
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Inventory
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductStocks-skuInputContainer-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    SKU (Stock Keeping Unit)
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="sku"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          SKU (Stock Keeping Unit)
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      name="isPreorder"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Variant currently in preorder
                  <div
                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                    >
                      Preview
                    </span>
                  </div>
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      name="trackInventory"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Track Inventory
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    Active inventory tracking will automatically calculate changes of stock
                  </div>
                </span>
              </label>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id ProductStocks-quantityContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <div
                  class="ProductStocks-quantityHeader-id"
                >
                  <span>
                    Quantity
                  </span>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Assign this variant to a channel in the product channel manager to define warehouses allocation
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Search Engine Preview
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this product easier to find
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductOrganization-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Organize Product
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <a
                  class="Link-root-id Link-primary-id Link-noUnderline-id Link-disabled-id"
                  href=""
                >
                  ...
                </a>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Configurable
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                ...
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-101-label"
                class="SingleAutocompleteSelectField-container-id"
                data-test-id="category"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Category
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-101-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      disabled=""
                      id="downshift-101-input"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Category
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-102-label"
                class="MultiAutocompleteSelectField-container-id"
                data-test-id="collections"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Collections
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-102-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-102-menu"
                      role="listbox"
                      testid="collection"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Collections
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                  >
                    *Optional. Adding product to collection helps users find it.
                  </p>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              />
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 1 out of 7 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Taxes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id ProductTaxes-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                data-test-id="override-tax-type"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      name="changeTaxCode"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Override the product type's tax rate
                </span>
              </label>
              <hr
                class="Hr-root-id ProductTaxes-hr-id"
              />
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                data-test-id="charge-taxes"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      name="chargeTaxes"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Charge taxes on this product
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Products / Product edit when product has no images 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Ergonomic Plastic Bacon
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id Grid-richText-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Ergonomic Plastic Bacon"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-description"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Description
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                />
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Product Rating
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="rating"
                      type="number"
                      value="100"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Product Rating
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductMedia-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Media
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="button-upload-image"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="ProductMedia-fileField-id"
                  id="fileUpload"
                  multiple=""
                  type="file"
                />
              </div>
            </div>
            <div
              class="ProductMedia-imageGridContainer-id"
            >
              <div
                class="ImageUpload-photosIconContainer-id"
                tabindex="0"
              >
                <div
                  class=""
                >
                  <input
                    accept="image/*"
                    autocomplete="off"
                    class="ImageUpload-fileField-id"
                    multiple=""
                    style="display:none"
                    tabindex="-1"
                    type="file"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      clip-rule="evenodd"
                      d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                  <div
                    class="MuiTypography-root-id ImageUpload-uploadText-id MuiTypography-body1-id"
                  >
                    Drop here to upload
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Attributes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Attributes-cardContent-id"
            >
              <div
                class="Attributes-expansionBar-id"
              >
                <div
                  class="Attributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    2 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
                  data-test-id="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Borders
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-91-label"
                    class="SingleAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Value
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-91-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-91-input"
                          type="text"
                          value="portals"
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="SingleAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Value
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Legacy
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-92-label"
                    class="MultiAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Values
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-92-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-92-menu"
                          role="listbox"
                          type="text"
                          value=""
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="MultiAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Values
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                  <div
                    class="MultiAutocompleteSelectField-chipContainer-id"
                  >
                    <div
                      class="MultiAutocompleteSelectField-chip-id"
                    >
                      <div
                        class="MultiAutocompleteSelectField-chipInner-id"
                      >
                        <div
                          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                        >
                          Auto Loan Account
                        </div>
                        <button
                          class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                          data-test-id="remove"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Variants
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <a
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="button-add-variant"
                  href="/products/123/variant/add"
                  role="button"
                  tabindex="0"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create variant
                  </span>
                </a>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id ProductVariants-warehouseSelectContainer-id"
            >
              <div
                class="MuiTypography-root-id ProductVariants-warehouseLabel-id MuiTypography-body1-id"
              >
                Available inventory at:
              </div>
              <span
                class="LinkChoice-root-id ProductVariants-select-id"
                tabindex="0"
              >
                <a
                  class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                >
                  All Warehouses
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id LinkChoice-arrow-id MuiSvgIcon-colorPrimary-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <g
                      style="fill-rule:evenodd"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </g>
                  </svg>
                </a>
              </span>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <a
                class="TableRowLink-link-id"
                href="/products/p10171/variant/pv75934"
              />
              <a
                class="TableRowLink-link-id"
                href="/products/p10171/variant/pv68615"
              />
              <table
                class="MuiTable-root-id"
              >
                <colgroup>
                  <col
                    class="ProductVariants-colGrab-id"
                  />
                  <col />
                  <col
                    class="ProductVariants-colName-id"
                  />
                  <col
                    class="ProductVariants-colSku-id"
                  />
                  <col
                    class="ProductVariants-colPrice-id"
                  />
                  <col
                    class="ProductVariants-colInventory-id"
                  />
                  <col
                    class="ProductVariants-colActions-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id TableHead-dragRows-id MuiTableCell-paddingCheckbox-id"
                      scope="col"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colName-id"
                      scope="col"
                    >
                      Variant
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colInventory-id"
                      scope="col"
                    >
                      Inventory
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colActions-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-id"
                    data-test-id="product-variant-row"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
                      data-test-id="name"
                    >
                      Cordoba Oro
                      <span
                        class="ProductVariants-defaultVariant-id"
                      >
                        Default
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-test-id="sku"
                    >
                      87192-94370
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                      data-test-id="inventory"
                    >
                      In preorder
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
                      data-test-id="actions"
                    />
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-id"
                    data-test-id="product-variant-row"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
                      data-test-id="name"
                    >
                      silver
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-test-id="sku"
                    >
                      69055-15190
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                      data-test-id="inventory"
                    >
                      In preorder
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
                      data-test-id="actions"
                    >
                      <div
                        data-test-id="menu"
                      >
                        <button
                          aria-haspopup="true"
                          aria-label="More"
                          class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                          color="primary"
                          data-test-id="show-more-button"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              clip-rule="evenodd"
                              d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                              fill="currentColor"
                              fill-rule="evenodd"
                            />
                          </svg>
                        </button>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Search Engine Preview
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this product easier to find
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.id"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          100023123
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductOrganization-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Organize Product
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <a
                  class="Link-root-id Link-primary-id Link-noUnderline-id"
                  href="/product-types/pt76406"
                >
                  Versatile
                </a>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Configurable
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Yes
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-93-label"
                class="SingleAutocompleteSelectField-container-id"
                data-test-id="category"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Category
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-93-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-93-input"
                      type="text"
                      value="Apparel"
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Category
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-94-label"
                class="MultiAutocompleteSelectField-container-id"
                data-test-id="collections"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Collections
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-94-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-94-menu"
                      role="listbox"
                      testid="collection"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Collections
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                  >
                    *Optional. Adding product to collection helps users find it.
                  </p>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              >
                <div
                  class="MultiAutocompleteSelectField-chip-id"
                >
                  <div
                    class="MultiAutocompleteSelectField-chipInner-id"
                  >
                    <div
                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                    >
                      Winter sale
                    </div>
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="collection-remove"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 1 out of 7 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Taxes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id ProductTaxes-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
                data-test-id="override-tax-type"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="changeTaxCode"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Override the product type's tax rate
                </span>
              </label>
              <hr
                class="Hr-root-id ProductTaxes-hr-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
                data-test-id="charge-taxes"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="chargeTaxes"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Charge taxes on this product
                </span>
              </label>
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-95-label"
                class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
                data-test-id="select-tax-type"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Tax Rate
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-95-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-95-input"
                      type="text"
                      value="standard"
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Tax Rate
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Products / Product edit when product has no variants 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Ergonomic Plastic Bacon
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id Grid-richText-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Ergonomic Plastic Bacon"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-description"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Description
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                />
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Product Rating
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="rating"
                      type="number"
                      value="100"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Product Rating
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductMedia-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Media
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="button-upload-image"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="ProductMedia-fileField-id"
                  id="fileUpload"
                  multiple=""
                  type="file"
                />
              </div>
            </div>
            <div
              class="ProductMedia-imageGridContainer-id"
            >
              <div
                class="ProductMedia-imageUpload-id ImageUpload-photosIconContainer-id"
                tabindex="0"
              />
              <div
                class="MuiCardContent-root-id"
              >
                <div
                  class="ProductMedia-root-id"
                >
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdEltYWdlOjE%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdEltYWdlOaE%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UPJvZHVjdEltYWdlOjV%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdEltYHdlOjX%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdIlnYWdlOjX%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Attributes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Attributes-cardContent-id"
            >
              <div
                class="Attributes-expansionBar-id"
              >
                <div
                  class="Attributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    2 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
                  data-test-id="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Borders
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-96-label"
                    class="SingleAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Value
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-96-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-96-input"
                          type="text"
                          value="portals"
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="SingleAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Value
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Legacy
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-97-label"
                    class="MultiAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Values
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-97-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-97-menu"
                          role="listbox"
                          type="text"
                          value=""
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="MultiAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Values
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                  <div
                    class="MultiAutocompleteSelectField-chipContainer-id"
                  >
                    <div
                      class="MultiAutocompleteSelectField-chip-id"
                    >
                      <div
                        class="MultiAutocompleteSelectField-chipInner-id"
                      >
                        <div
                          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                        >
                          Auto Loan Account
                        </div>
                        <button
                          class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                          data-test-id="remove"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Shipping
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Weight
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      name="weight"
                      type="text"
                      value="5"
                    />
                    <div
                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        KG
                      </div>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Weight
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Inventory
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductStocks-skuInputContainer-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    SKU (Stock Keeping Unit)
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="sku"
                      type="text"
                      value="87192-94370"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          SKU (Stock Keeping Unit)
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="isPreorder"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Variant currently in preorder
                  <div
                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                    >
                      Preview
                    </span>
                  </div>
                </span>
              </label>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id ProductStocks-caption-id MuiTypography-caption-id"
              >
                Set up an end date of preorder. When end date will be reached product will be automatically taken from preorder to standard selling
              </div>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                name="hasPreorderEndDate"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  SETUP END DATE
                </span>
              </button>
              <div
                class="MuiTypography-root-id ProductStocks-preorderLimitInfo-id MuiTypography-caption-id"
              >
                Preordered products will be available in all warehouses. You can set a threshold for sold quantity. Leaving input blank will be interpreted as no limit to sale. Sold items will be allocated at the warehouse assigned to chosen shipping zone.
              </div>
              <div
                class="ProductStocks-thresholdRow-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id ProductStocks-thresholdInput-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Global threshold
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      name="globalThreshold"
                      type="text"
                      value="0"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Global threshold
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                  >
                    Threshold that cannot be exceeded even if per channel thresholds are still available
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Search Engine Preview
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this product easier to find
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.id"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          100023123
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductOrganization-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Organize Product
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <a
                  class="Link-root-id Link-primary-id Link-noUnderline-id"
                  href="/product-types/pt76406"
                >
                  Versatile
                </a>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Configurable
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                No
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-98-label"
                class="SingleAutocompleteSelectField-container-id"
                data-test-id="category"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Category
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-98-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-98-input"
                      type="text"
                      value="Apparel"
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Category
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-99-label"
                class="MultiAutocompleteSelectField-container-id"
                data-test-id="collections"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Collections
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-99-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-99-menu"
                      role="listbox"
                      testid="collection"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Collections
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                  >
                    *Optional. Adding product to collection helps users find it.
                  </p>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              >
                <div
                  class="MultiAutocompleteSelectField-chip-id"
                >
                  <div
                    class="MultiAutocompleteSelectField-chipInner-id"
                  >
                    <div
                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                    >
                      Winter sale
                    </div>
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="collection-remove"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 1 out of 7 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Taxes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id ProductTaxes-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
                data-test-id="override-tax-type"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="changeTaxCode"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Override the product type's tax rate
                </span>
              </label>
              <hr
                class="Hr-root-id ProductTaxes-hr-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
                data-test-id="charge-taxes"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="chargeTaxes"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Charge taxes on this product
                </span>
              </label>
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-100-label"
                class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
                data-test-id="select-tax-type"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Tax Rate
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-100-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-100-input"
                      type="text"
                      value="standard"
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Tax Rate
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Products / Product edit with channels 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Ergonomic Plastic Bacon
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id Grid-richText-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Ergonomic Plastic Bacon"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-description"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Description
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                />
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Product Rating
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="rating"
                      type="number"
                      value="100"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Product Rating
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductMedia-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Media
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="button-upload-image"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="ProductMedia-fileField-id"
                  id="fileUpload"
                  multiple=""
                  type="file"
                />
              </div>
            </div>
            <div
              class="ProductMedia-imageGridContainer-id"
            >
              <div
                class="ProductMedia-imageUpload-id ImageUpload-photosIconContainer-id"
                tabindex="0"
              />
              <div
                class="MuiCardContent-root-id"
              >
                <div
                  class="ProductMedia-root-id"
                >
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdEltYWdlOjE%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdEltYWdlOaE%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UPJvZHVjdEltYWdlOjV%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdEltYHdlOjX%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test-id="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      >
                        <a
                          aria-disabled="false"
                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
                          href="/products/123/image/UHJvZHVjdIlnYWdlOjX%3D"
                          role="button"
                          tabindex="0"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
                              fill="currentColor"
                            />
                            <path
                              d="M3 21h18"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Attributes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Attributes-cardContent-id"
            >
              <div
                class="Attributes-expansionBar-id"
              >
                <div
                  class="Attributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    2 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
                  data-test-id="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Borders
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-126-label"
                    class="SingleAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Value
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-126-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-126-input"
                          type="text"
                          value="portals"
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="SingleAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Value
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Legacy
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-127-label"
                    class="MultiAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Values
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-127-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-127-menu"
                          role="listbox"
                          type="text"
                          value=""
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="MultiAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Values
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                  <div
                    class="MultiAutocompleteSelectField-chipContainer-id"
                  >
                    <div
                      class="MultiAutocompleteSelectField-chip-id"
                    >
                      <div
                        class="MultiAutocompleteSelectField-chipInner-id"
                      >
                        <div
                          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                        >
                          Auto Loan Account
                        </div>
                        <button
                          class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                          data-test-id="remove"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Variants
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <a
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="button-add-variant"
                  href="/products/123/variant/add"
                  role="button"
                  tabindex="0"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create variant
                  </span>
                </a>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id ProductVariants-warehouseSelectContainer-id"
            >
              <div
                class="MuiTypography-root-id ProductVariants-warehouseLabel-id MuiTypography-body1-id"
              >
                Available inventory at:
              </div>
              <span
                class="LinkChoice-root-id ProductVariants-select-id"
                tabindex="0"
              >
                <a
                  class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                >
                  All Warehouses
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id LinkChoice-arrow-id MuiSvgIcon-colorPrimary-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <g
                      style="fill-rule:evenodd"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </g>
                  </svg>
                </a>
              </span>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <a
                class="TableRowLink-link-id"
                href="/products/p10171/variant/pv75934"
              />
              <a
                class="TableRowLink-link-id"
                href="/products/p10171/variant/pv68615"
              />
              <table
                class="MuiTable-root-id"
              >
                <colgroup>
                  <col
                    class="ProductVariants-colGrab-id"
                  />
                  <col />
                  <col
                    class="ProductVariants-colName-id"
                  />
                  <col
                    class="ProductVariants-colSku-id"
                  />
                  <col
                    class="ProductVariants-colPrice-id"
                  />
                  <col
                    class="ProductVariants-colInventory-id"
                  />
                  <col
                    class="ProductVariants-colActions-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id TableHead-dragRows-id MuiTableCell-paddingCheckbox-id"
                      scope="col"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colName-id"
                      scope="col"
                    >
                      Variant
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colSku-id"
                      scope="col"
                    >
                      SKU
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colInventory-id"
                      scope="col"
                    >
                      Inventory
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colActions-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-id"
                    data-test-id="product-variant-row"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
                      data-test-id="name"
                    >
                      Cordoba Oro
                      <span
                        class="ProductVariants-defaultVariant-id"
                      >
                        Default
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-test-id="sku"
                    >
                      87192-94370
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                      data-test-id="inventory"
                    >
                      In preorder
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
                      data-test-id="actions"
                    />
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-id"
                    data-test-id="product-variant-row"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
                      data-test-id="name"
                    >
                      silver
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-test-id="sku"
                    >
                      69055-15190
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                      data-test-id="inventory"
                    >
                      In preorder
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
                      data-test-id="actions"
                    >
                      <div
                        data-test-id="menu"
                      >
                        <button
                          aria-haspopup="true"
                          aria-label="More"
                          class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                          color="primary"
                          data-test-id="show-more-button"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              clip-rule="evenodd"
                              d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                              fill="currentColor"
                              fill-rule="evenodd"
                            />
                          </svg>
                        </button>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Search Engine Preview
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this product easier to find
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.id"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          100023123
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductOrganization-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Organize Product
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <a
                  class="Link-root-id Link-primary-id Link-noUnderline-id"
                  href="/product-types/pt76406"
                >
                  Versatile
                </a>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Configurable
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Yes
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-128-label"
                class="SingleAutocompleteSelectField-container-id"
                data-test-id="category"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Category
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-128-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-128-input"
                      type="text"
                      value="Apparel"
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Category
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-129-label"
                class="MultiAutocompleteSelectField-container-id"
                data-test-id="collections"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Collections
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-129-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-129-menu"
                      role="listbox"
                      testid="collection"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Collections
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                  >
                    *Optional. Adding product to collection helps users find it.
                  </p>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              >
                <div
                  class="MultiAutocompleteSelectField-chip-id"
                >
                  <div
                    class="MultiAutocompleteSelectField-chipInner-id"
                  >
                    <div
                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                    >
                      Winter sale
                    </div>
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="collection-remove"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 1 out of 7 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Taxes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id ProductTaxes-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
                data-test-id="override-tax-type"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="changeTaxCode"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Override the product type's tax rate
                </span>
              </label>
              <hr
                class="Hr-root-id ProductTaxes-hr-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
                data-test-id="charge-taxes"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="chargeTaxes"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Charge taxes on this product
                </span>
              </label>
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-130-label"
                class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
                data-test-id="select-tax-type"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Tax Rate
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-130-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-130-input"
                      type="text"
                      value="standard"
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Tax Rate
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Products / Product image details when loaded data 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Edit Media
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductMediaNavigation-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  All Media
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductMediaNavigation-root-id"
              >
                <div
                  class="ProductMediaNavigation-imageContainer-id"
                >
                  <img
                    class="ProductMediaNavigation-image-id"
                    src="placeholder1080x1080.png"
                  />
                </div>
                <div
                  class="ProductMediaNavigation-imageContainer-id"
                >
                  <img
                    class="ProductMediaNavigation-image-id"
                    src="placeholder1080x1080.png"
                  />
                </div>
                <div
                  class="ProductMediaNavigation-imageContainer-id"
                >
                  <img
                    class="ProductMediaNavigation-image-id"
                    src="placeholder1080x1080.png"
                  />
                </div>
                <div
                  class="ProductMediaNavigation-imageContainer-id"
                >
                  <img
                    class="ProductMediaNavigation-image-id"
                    src="placeholder1080x1080.png"
                  />
                </div>
                <div
                  class="ProductMediaNavigation-imageContainer-id"
                >
                  <img
                    class="ProductMediaNavigation-image-id"
                    src="placeholder1080x1080.png"
                  />
                </div>
                <div
                  class="ProductMediaNavigation-imageContainer-id"
                >
                  <img
                    class="ProductMediaNavigation-image-id"
                    src="placeholder1080x1080.png"
                  />
                </div>
                <div
                  class="ProductMediaNavigation-imageContainer-id"
                >
                  <img
                    class="ProductMediaNavigation-image-id"
                    src="placeholder1080x1080.png"
                  />
                </div>
                <div
                  class="ProductMediaNavigation-imageContainer-id"
                >
                  <img
                    class="ProductMediaNavigation-image-id"
                    src="placeholder1080x1080.png"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Media Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Description
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    name="description"
                    rows="1"
                  >
                    Lorem ipsum
                  </textarea>
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Description
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                >
                  Optional
                </p>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Media View
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductMediaPage-imageContainer-id"
              >
                <img
                  alt="Lorem ipsum"
                  class="ProductMediaPage-image-id"
                  src="placeholder1080x1080.png"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Products / Product image details when loading data 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Edit Media
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id ProductMediaNavigation-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  All Media
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
          </div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Media Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Description
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    disabled=""
                    name="description"
                    rows="1"
                  />
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Description
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
                >
                  Optional
                </p>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Media View
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Products / Product list / Attribute display date 1`] = `
<div
  style="padding:24px"
>
  <time
    class=""
    datetime="2022-03-11"
    title="Mar 11, 2022"
  >
    in 4 years
  </time>
</div>
`;

exports[`Storyshots Views / Products / Product list / Attribute display datetime 1`] = `
<div
  style="padding:24px"
>
  <time
    class=""
    datetime="1646148240000"
    title="Mar 1, 2022 10:24 AM"
  >
    in 4 years
  </time>
</div>
`;

exports[`Storyshots Views / Products / Product list / Attribute display default 1`] = `
<div
  style="padding:24px"
>
  <span
    title="Lorem Ipsum, Dolor Sit"
  >
    Lorem Ipsum, Dolor Sit
  </span>
</div>
`;

exports[`Storyshots Views / Products / Product list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Products
        </div>
        <div
          class="ProductListPage-settings-id"
          data-test-id="menu"
        >
          <button
            aria-haspopup="true"
            aria-label="More"
            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
            color="primary"
            data-test-id="show-more-button"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                clip-rule="evenodd"
                d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
          </button>
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            100/1000 SKUs used
          </div>
          <div
            class="ProductListPage-columnPicker-id"
          >
            <button
              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="25"
                  viewBox="0 0 24 25"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M9 3.002H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4m0-18v18m0-18h6m-6 18h6m0 0h4a2 2 0 0 0 2-2v-14a2 2 0 0 0-2-2h-4m0 18v-18"
                    stroke="currentColor"
                    stroke-width="1.5"
                  />
                </svg>
              </span>
            </button>
          </div>
          <div
            aria-label="button with select"
            class="MuiButtonGroup-root-id"
            data-test-id="add-product"
            role="group"
          >
            <a
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButton-containedPrimary-id"
              href="/products/add"
              role="button"
              style="width:100%"
              tabindex="0"
            >
              <span
                class="MuiButton-label-id"
              >
                Create Product
              </span>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Products
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Products..."
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ProductList-tableContainer-id"
      >
        <div
          class="ResponsiveTable-root-id"
        >
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo2MQ%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo2NA%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo2NQ%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3NQ%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3Ng%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3Mg%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3MQ%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3NA%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3OQ%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3Mw%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3OA%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo4OQ%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMDc%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMDg%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMDk%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMTA%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMTU%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMTY%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMTc%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo4NQ%3D%3D"
          />
          <table
            class="MuiTable-root-id ProductList-table-id"
          >
            <colgroup>
              <col />
              <col
                class="ProductList-colName-id"
              />
              <col
                class="ProductList-colType-id"
              />
              <col
                class="ProductList-colPublished-id"
              />
              <col
                class="ProductList-colPrice-id"
              />
            </colgroup>
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                  scope="col"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
                  data-test-id="col-name-header"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      <span
                        class="ProductList-colNameHeader-id"
                      >
                        Name
                      </span>
                    </div>
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="24"
                        width="24"
                      />
                      <path
                        clip-rule="evenodd"
                        d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                        fill="currentColor"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colType-id"
                  data-test-id="col-type-header"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Type
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPublished-id"
                  data-test-id="col-availability-header"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Availability
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPrice-id"
                  data-test-id="col-price-header"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Price
                    </div>
                  </div>
                </th>
              </tr>
            </thead>
            <tfoot
              class="MuiTableFooter-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id"
                  colspan="5"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                  >
                    <div
                      class="Pagination-spacer-id"
                    >
                      <div
                        class="Pagination-rowNumber-id"
                      >
                        <span
                          class="Pagination-rowNumberLabel-id"
                        >
                          No. of rows
                        </span>
                         20
                      </div>
                    </div>
                    <div
                      class="Pagination-actions-id"
                    >
                      <button
                        aria-label="previous page"
                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-back"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                          />
                        </svg>
                      </button>
                      <button
                        aria-label="next page"
                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-next"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                </td>
              </tr>
            </tfoot>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo2MQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Nebula Night Sky Paint
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo2NA=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Light Speed Yellow Paint
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo2NQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Hyperspace Turquoise Paint
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3NQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Pineapple Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3Ng=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Coconut Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3Mg=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Apple Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3MQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Orange Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3NA=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Banana Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3OQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Bean Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3Mw=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Carrot Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3OA=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Green Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo4OQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Code Division T-shirt
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMDc="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Polo Shirt
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMDg="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Polo Shirt
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMDk="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Polo Shirt
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMTA="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Polo Shirt
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMTU="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Black Hoodie
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMTY="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Blue Hoodie
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMTc="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Mustard Hoodie
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo4NQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Colored Parrot Cushion
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Cushion
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Products / Product list limits reached 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Products
        </div>
        <div
          class="ProductListPage-settings-id"
          data-test-id="menu"
        >
          <button
            aria-haspopup="true"
            aria-label="More"
            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
            color="primary"
            data-test-id="show-more-button"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                clip-rule="evenodd"
                d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
          </button>
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            1000/1000 SKUs used
          </div>
          <div
            class="ProductListPage-columnPicker-id"
          >
            <button
              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="25"
                  viewBox="0 0 24 25"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M9 3.002H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4m0-18v18m0-18h6m-6 18h6m0 0h4a2 2 0 0 0 2-2v-14a2 2 0 0 0-2-2h-4m0 18v-18"
                    stroke="currentColor"
                    stroke-width="1.5"
                  />
                </svg>
              </span>
            </button>
          </div>
          <div
            aria-label="button with select"
            class="MuiButtonGroup-root-id"
            data-test-id="add-product"
            role="group"
          >
            <a
              aria-disabled="true"
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-disabled-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
              href="/products/add"
              role="button"
              style="width:100%"
              tabindex="-1"
            >
              <span
                class="MuiButton-label-id"
              >
                Create Product
              </span>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id LimitReachedAlert-root-id Alert-root-id Alert-warning-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      data-test="alert"
    >
      <div
        class="MuiCardContent-root-id"
      >
        <div
          class="Alert-container-id"
        >
          <div
            class="Alert-icon-id"
          >
            <svg
              class="Alert-warning-id"
              fill="none"
              height="40"
              viewBox="0 0 40 40"
              width="40"
              xmlns="http://www.w3.org/2000/svg"
            >
              <circle
                cx="20"
                cy="20"
                fill="var(--background-paper)"
                r="20"
              />
              <circle
                cx="20"
                cy="20"
                r="14"
                stroke="currentColor"
                stroke-width="4"
              />
              <path
                clip-rule="evenodd"
                d="M19.5 11C18.6716 11 18 11.6716 18 12.5V20.5C18 21.3284 18.6716 22 19.5 22H20.5C21.3284 22 22 21.3284 22 20.5V12.5C22 11.6716 21.3284 11 20.5 11H19.5ZM19.5 25C18.6716 25 18 25.6716 18 26.5V27.5C18 28.3284 18.6716 29 19.5 29H20.5C21.3284 29 22 28.3284 22 27.5V26.5C22 25.6716 21.3284 25 20.5 25H19.5Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
          </div>
          <div
            class="Alert-content-id"
          >
            <div
              class="Alert-titleBar-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-h5-id"
              >
                SKU limit reached
              </div>
              <button
                class="MuiButtonBase-root-id IconButton-secondary-id Alert-close-id"
                data-test="close"
                tabindex="0"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="25"
                  viewBox="0 0 24 25"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    clip-rule="evenodd"
                    d="M7.53 6.472a.75.75 0 1 0-1.06 1.06l4.47 4.47-4.47 4.47a.75.75 0 0 0 1.06 1.06l4.47-4.47 4.47 4.47a.75.75 0 1 0 1.06-1.06l-4.47-4.47 4.47-4.47a.75.75 0 0 0-1.06-1.06L12 10.942l-4.47-4.47Z"
                    fill="currentColor"
                    fill-rule="evenodd"
                  />
                </svg>
              </button>
            </div>
            You have reached your SKU limit, you will be no longer able to add SKUs to your store. If you would like to up your limit, contact your administration staff about raising your limits.
          </div>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Products
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Products..."
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ProductList-tableContainer-id"
      >
        <div
          class="ResponsiveTable-root-id"
        >
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo2MQ%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo2NA%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo2NQ%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3NQ%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3Ng%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3Mg%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3MQ%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3NA%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3OQ%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3Mw%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3OA%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo4OQ%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMDc%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMDg%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMDk%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMTA%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMTU%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMTY%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMTc%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo4NQ%3D%3D"
          />
          <table
            class="MuiTable-root-id ProductList-table-id"
          >
            <colgroup>
              <col />
              <col
                class="ProductList-colName-id"
              />
              <col
                class="ProductList-colType-id"
              />
              <col
                class="ProductList-colPublished-id"
              />
              <col
                class="ProductList-colPrice-id"
              />
            </colgroup>
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                  scope="col"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
                  data-test-id="col-name-header"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      <span
                        class="ProductList-colNameHeader-id"
                      >
                        Name
                      </span>
                    </div>
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="24"
                        width="24"
                      />
                      <path
                        clip-rule="evenodd"
                        d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                        fill="currentColor"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colType-id"
                  data-test-id="col-type-header"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Type
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPublished-id"
                  data-test-id="col-availability-header"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Availability
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPrice-id"
                  data-test-id="col-price-header"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Price
                    </div>
                  </div>
                </th>
              </tr>
            </thead>
            <tfoot
              class="MuiTableFooter-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id"
                  colspan="5"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                  >
                    <div
                      class="Pagination-spacer-id"
                    >
                      <div
                        class="Pagination-rowNumber-id"
                      >
                        <span
                          class="Pagination-rowNumberLabel-id"
                        >
                          No. of rows
                        </span>
                         20
                      </div>
                    </div>
                    <div
                      class="Pagination-actions-id"
                    >
                      <button
                        aria-label="previous page"
                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-back"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                          />
                        </svg>
                      </button>
                      <button
                        aria-label="next page"
                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-next"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                </td>
              </tr>
            </tfoot>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo2MQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Nebula Night Sky Paint
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo2NA=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Light Speed Yellow Paint
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo2NQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Hyperspace Turquoise Paint
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3NQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Pineapple Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3Ng=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Coconut Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3Mg=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Apple Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3MQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Orange Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3NA=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Banana Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3OQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Bean Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3Mw=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Carrot Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3OA=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Green Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo4OQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Code Division T-shirt
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMDc="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Polo Shirt
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMDg="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Polo Shirt
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMDk="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Polo Shirt
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMTA="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Polo Shirt
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMTU="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Black Hoodie
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMTY="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Blue Hoodie
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMTc="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Mustard Hoodie
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo4NQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Colored Parrot Cushion
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Cushion
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Products / Product list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Products
        </div>
        <div
          class="ProductListPage-settings-id"
          data-test-id="menu"
        >
          <button
            aria-haspopup="true"
            aria-label="More"
            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
            color="primary"
            data-test-id="show-more-button"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                clip-rule="evenodd"
                d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
          </button>
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            100/1000 SKUs used
          </div>
          <div
            class="ProductListPage-columnPicker-id"
          >
            <button
              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="25"
                  viewBox="0 0 24 25"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M9 3.002H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4m0-18v18m0-18h6m-6 18h6m0 0h4a2 2 0 0 0 2-2v-14a2 2 0 0 0-2-2h-4m0 18v-18"
                    stroke="currentColor"
                    stroke-width="1.5"
                  />
                </svg>
              </span>
            </button>
          </div>
          <div
            aria-label="button with select"
            class="MuiButtonGroup-root-id"
            data-test-id="add-product"
            role="group"
          >
            <a
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButton-containedPrimary-id"
              href="/products/add"
              role="button"
              style="width:100%"
              tabindex="0"
            >
              <span
                class="MuiButton-label-id"
              >
                Create Product
              </span>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                All Products
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Products..."
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id FilterBar-tabActionButton-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            Delete Search
          </span>
        </button>
      </div>
      <div
        class="ProductList-tableContainer-id"
      >
        <div
          class="ResponsiveTable-root-id"
        >
          <table
            class="MuiTable-root-id ProductList-table-id"
          >
            <colgroup>
              <col />
              <col
                class="ProductList-colName-id"
              />
              <col
                class="ProductList-colType-id"
              />
              <col
                class="ProductList-colPublished-id"
              />
              <col
                class="ProductList-colPrice-id"
              />
            </colgroup>
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                  scope="col"
                >
                  <span
                    aria-disabled="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                    tabindex="-1"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        disabled=""
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
                  data-test-id="col-name-header"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      <span
                        class="ProductList-colNameHeader-id"
                      >
                        Name
                      </span>
                    </div>
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="24"
                        width="24"
                      />
                      <path
                        clip-rule="evenodd"
                        d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                        fill="currentColor"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colType-id"
                  data-test-id="col-type-header"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Type
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPublished-id"
                  data-test-id="col-availability-header"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Availability
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPrice-id"
                  data-test-id="col-price-header"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Price
                    </div>
                  </div>
                </th>
              </tr>
            </thead>
            <tfoot
              class="MuiTableFooter-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id"
                  colspan="5"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                  >
                    <div
                      class="Pagination-spacer-id"
                    >
                      <div
                        class="Pagination-rowNumber-id"
                      >
                        <span
                          class="Pagination-rowNumberLabel-id"
                        >
                          No. of rows
                        </span>
                         20
                      </div>
                    </div>
                    <div
                      class="Pagination-actions-id"
                    >
                      <button
                        aria-label="previous page"
                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-back"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                          />
                        </svg>
                      </button>
                      <button
                        aria-label="next page"
                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-next"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                </td>
              </tr>
            </tfoot>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id ProductList-link-id"
                data-test-id="id-skeleton"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                    tabindex="-1"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        disabled=""
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  <span
                    class="Skeleton-skeleton-id"
                    data-test-id="skeleton"
                  >
                    ‌
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="false"
                  data-test-id="availability"
                >
                  <span
                    class="Skeleton-skeleton-id"
                    data-test-id="skeleton"
                  >
                    ‌
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  <span
                    class="Skeleton-skeleton-id"
                    data-test-id="skeleton"
                  >
                    ‌
                  </span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Products / Product list no channels 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Products
        </div>
        <div
          class="ProductListPage-settings-id"
          data-test-id="menu"
        >
          <button
            aria-haspopup="true"
            aria-label="More"
            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
            color="primary"
            data-test-id="show-more-button"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                clip-rule="evenodd"
                d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
          </button>
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            100/1000 SKUs used
          </div>
          <div
            class="ProductListPage-columnPicker-id"
          >
            <button
              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="25"
                  viewBox="0 0 24 25"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M9 3.002H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4m0-18v18m0-18h6m-6 18h6m0 0h4a2 2 0 0 0 2-2v-14a2 2 0 0 0-2-2h-4m0 18v-18"
                    stroke="currentColor"
                    stroke-width="1.5"
                  />
                </svg>
              </span>
            </button>
          </div>
          <div
            aria-label="button with select"
            class="MuiButtonGroup-root-id"
            data-test-id="add-product"
            role="group"
          >
            <a
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButton-containedPrimary-id"
              href="/products/add"
              role="button"
              style="width:100%"
              tabindex="0"
            >
              <span
                class="MuiButton-label-id"
              >
                Create Product
              </span>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Products
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Products..."
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ProductList-tableContainer-id"
      >
        <div
          class="ResponsiveTable-root-id"
        >
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo2MQ%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo2NA%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo2NQ%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3NQ%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3Ng%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3Mg%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3MQ%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3NA%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3OQ%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3Mw%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3OA%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo4OQ%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMDc%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMDg%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMDk%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMTA%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMTU%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMTY%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMTc%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo4NQ%3D%3D"
          />
          <table
            class="MuiTable-root-id ProductList-table-id"
          >
            <colgroup>
              <col />
              <col
                class="ProductList-colName-id"
              />
              <col
                class="ProductList-colType-id"
              />
              <col
                class="ProductList-colPublished-id"
              />
              <col
                class="ProductList-colPrice-id"
              />
            </colgroup>
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                  scope="col"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
                  data-test-id="col-name-header"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      <span
                        class="ProductList-colNameHeader-id"
                      >
                        Name
                      </span>
                    </div>
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="24"
                        width="24"
                      />
                      <path
                        clip-rule="evenodd"
                        d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                        fill="currentColor"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colType-id"
                  data-test-id="col-type-header"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Type
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPublished-id TableCellHeader-disabled-id"
                  data-test-id="col-availability-header"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Availability
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPrice-id TableCellHeader-disabled-id"
                  data-test-id="col-price-header"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Price
                    </div>
                  </div>
                </th>
              </tr>
            </thead>
            <tfoot
              class="MuiTableFooter-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id"
                  colspan="5"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                  >
                    <div
                      class="Pagination-spacer-id"
                    >
                      <div
                        class="Pagination-rowNumber-id"
                      >
                        <span
                          class="Pagination-rowNumberLabel-id"
                        >
                          No. of rows
                        </span>
                         20
                      </div>
                    </div>
                    <div
                      class="Pagination-actions-id"
                    >
                      <button
                        aria-label="previous page"
                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-back"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                          />
                        </svg>
                      </button>
                      <button
                        aria-label="next page"
                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-next"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                </td>
              </tr>
            </tfoot>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo2MQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Nebula Night Sky Paint
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="false"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-error-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      No channels
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo2NA=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Light Speed Yellow Paint
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="false"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-error-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      No channels
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo2NQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Hyperspace Turquoise Paint
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="false"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-error-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      No channels
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3NQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Pineapple Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="false"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-error-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      No channels
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3Ng=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Coconut Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="false"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-error-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      No channels
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3Mg=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Apple Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="false"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-error-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      No channels
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3MQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Orange Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="false"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-error-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      No channels
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3NA=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Banana Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="false"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-error-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      No channels
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3OQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Bean Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="false"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-error-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      No channels
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3Mw=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Carrot Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="false"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-error-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      No channels
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3OA=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Green Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="false"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-error-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      No channels
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo4OQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Code Division T-shirt
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="false"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-error-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      No channels
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMDc="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Polo Shirt
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="false"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-error-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      No channels
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMDg="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Polo Shirt
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="false"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-error-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      No channels
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMDk="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Polo Shirt
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="false"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-error-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      No channels
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMTA="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Polo Shirt
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="false"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-error-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      No channels
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMTU="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Black Hoodie
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="false"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-error-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      No channels
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMTY="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Blue Hoodie
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="false"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-error-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      No channels
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMTc="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Mustard Hoodie
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="false"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-error-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      No channels
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo4NQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Colored Parrot Cushion
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Cushion
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="false"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-error-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      No channels
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  -
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Products / Product list no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Products
        </div>
        <div
          class="ProductListPage-settings-id"
          data-test-id="menu"
        >
          <button
            aria-haspopup="true"
            aria-label="More"
            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
            color="primary"
            data-test-id="show-more-button"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                clip-rule="evenodd"
                d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
          </button>
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            100/1000 SKUs used
          </div>
          <div
            class="ProductListPage-columnPicker-id"
          >
            <button
              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="25"
                  viewBox="0 0 24 25"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M9 3.002H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4m0-18v18m0-18h6m-6 18h6m0 0h4a2 2 0 0 0 2-2v-14a2 2 0 0 0-2-2h-4m0 18v-18"
                    stroke="currentColor"
                    stroke-width="1.5"
                  />
                </svg>
              </span>
            </button>
          </div>
          <div
            aria-label="button with select"
            class="MuiButtonGroup-root-id"
            data-test-id="add-product"
            role="group"
          >
            <a
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButton-containedPrimary-id"
              href="/products/add"
              role="button"
              style="width:100%"
              tabindex="0"
            >
              <span
                class="MuiButton-label-id"
              >
                Create Product
              </span>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Products
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Products..."
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ProductList-tableContainer-id"
      >
        <div
          class="ResponsiveTable-root-id"
        >
          <table
            class="MuiTable-root-id ProductList-table-id"
          >
            <colgroup>
              <col
                class="ProductList-colName-id"
              />
              <col
                class="ProductList-colType-id"
              />
              <col
                class="ProductList-colPublished-id"
              />
              <col
                class="ProductList-colPrice-id"
              />
            </colgroup>
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
                  data-test-id="col-name-header"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      <span
                        class="ProductList-colNameHeader-id"
                      >
                        Name
                      </span>
                    </div>
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="24"
                        width="24"
                      />
                      <path
                        clip-rule="evenodd"
                        d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                        fill="currentColor"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colType-id"
                  data-test-id="col-type-header"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Type
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPublished-id"
                  data-test-id="col-availability-header"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Availability
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPrice-id"
                  data-test-id="col-price-header"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Price
                    </div>
                  </div>
                </th>
              </tr>
            </thead>
            <tfoot
              class="MuiTableFooter-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id"
                  colspan="4"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                  >
                    <div
                      class="Pagination-spacer-id"
                    >
                      <div
                        class="Pagination-rowNumber-id"
                      >
                        <span
                          class="Pagination-rowNumberLabel-id"
                        >
                          No. of rows
                        </span>
                         20
                      </div>
                    </div>
                    <div
                      class="Pagination-actions-id"
                    >
                      <button
                        aria-label="previous page"
                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-back"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                          />
                        </svg>
                      </button>
                      <button
                        aria-label="next page"
                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-next"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                </td>
              </tr>
            </tfoot>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id"
                  colspan="4"
                >
                  No products found
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Products / Product list no limits 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Products
        </div>
        <div
          class="ProductListPage-settings-id"
          data-test-id="menu"
        >
          <button
            aria-haspopup="true"
            aria-label="More"
            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
            color="primary"
            data-test-id="show-more-button"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                clip-rule="evenodd"
                d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
          </button>
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div
            class="ProductListPage-columnPicker-id"
          >
            <button
              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="25"
                  viewBox="0 0 24 25"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M9 3.002H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4m0-18v18m0-18h6m-6 18h6m0 0h4a2 2 0 0 0 2-2v-14a2 2 0 0 0-2-2h-4m0 18v-18"
                    stroke="currentColor"
                    stroke-width="1.5"
                  />
                </svg>
              </span>
            </button>
          </div>
          <div
            aria-label="button with select"
            class="MuiButtonGroup-root-id"
            data-test-id="add-product"
            role="group"
          >
            <a
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButton-containedPrimary-id"
              href="/products/add"
              role="button"
              style="width:100%"
              tabindex="0"
            >
              <span
                class="MuiButton-label-id"
              >
                Create Product
              </span>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Products
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Products..."
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ProductList-tableContainer-id"
      >
        <div
          class="ResponsiveTable-root-id"
        >
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo2MQ%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo2NA%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo2NQ%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3NQ%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3Ng%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3Mg%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3MQ%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3NA%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3OQ%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3Mw%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3OA%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo4OQ%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMDc%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMDg%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMDk%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMTA%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMTU%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMTY%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMTc%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo4NQ%3D%3D"
          />
          <table
            class="MuiTable-root-id ProductList-table-id"
          >
            <colgroup>
              <col />
              <col
                class="ProductList-colName-id"
              />
              <col
                class="ProductList-colType-id"
              />
              <col
                class="ProductList-colPublished-id"
              />
              <col
                class="ProductList-colPrice-id"
              />
            </colgroup>
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                  scope="col"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
                  data-test-id="col-name-header"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      <span
                        class="ProductList-colNameHeader-id"
                      >
                        Name
                      </span>
                    </div>
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="24"
                        width="24"
                      />
                      <path
                        clip-rule="evenodd"
                        d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                        fill="currentColor"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colType-id"
                  data-test-id="col-type-header"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Type
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPublished-id"
                  data-test-id="col-availability-header"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Availability
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPrice-id"
                  data-test-id="col-price-header"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Price
                    </div>
                  </div>
                </th>
              </tr>
            </thead>
            <tfoot
              class="MuiTableFooter-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id"
                  colspan="5"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                  >
                    <div
                      class="Pagination-spacer-id"
                    >
                      <div
                        class="Pagination-rowNumber-id"
                      >
                        <span
                          class="Pagination-rowNumberLabel-id"
                        >
                          No. of rows
                        </span>
                         20
                      </div>
                    </div>
                    <div
                      class="Pagination-actions-id"
                    >
                      <button
                        aria-label="previous page"
                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-back"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                          />
                        </svg>
                      </button>
                      <button
                        aria-label="next page"
                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-next"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                </td>
              </tr>
            </tfoot>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo2MQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Nebula Night Sky Paint
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo2NA=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Light Speed Yellow Paint
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo2NQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Hyperspace Turquoise Paint
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3NQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Pineapple Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3Ng=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Coconut Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3Mg=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Apple Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3MQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Orange Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3NA=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Banana Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3OQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Bean Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3Mw=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Carrot Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3OA=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Green Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo4OQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Code Division T-shirt
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMDc="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Polo Shirt
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMDg="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Polo Shirt
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMDk="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Polo Shirt
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMTA="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Polo Shirt
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMTU="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Black Hoodie
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMTY="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Blue Hoodie
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMTc="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Mustard Hoodie
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo4NQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Colored Parrot Cushion
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Cushion
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Products / Product list with data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Products
        </div>
        <div
          class="ProductListPage-settings-id"
          data-test-id="menu"
        >
          <button
            aria-haspopup="true"
            aria-label="More"
            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
            color="primary"
            data-test-id="show-more-button"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                clip-rule="evenodd"
                d="M10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
          </button>
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            100/1000 SKUs used
          </div>
          <div
            class="ProductListPage-columnPicker-id"
          >
            <button
              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="25"
                  viewBox="0 0 24 25"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M9 3.002H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4m0-18v18m0-18h6m-6 18h6m0 0h4a2 2 0 0 0 2-2v-14a2 2 0 0 0-2-2h-4m0 18v-18"
                    stroke="currentColor"
                    stroke-width="1.5"
                  />
                </svg>
              </span>
            </button>
          </div>
          <div
            aria-label="button with select"
            class="MuiButtonGroup-root-id"
            data-test-id="add-product"
            role="group"
          >
            <a
              aria-disabled="false"
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButton-containedPrimary-id"
              href="/products/add"
              role="button"
              style="width:100%"
              tabindex="0"
            >
              <span
                class="MuiButton-label-id"
              >
                Create Product
              </span>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Products
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Products..."
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ProductList-tableContainer-id"
      >
        <div
          class="ResponsiveTable-root-id"
        >
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo2MQ%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo2NA%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo2NQ%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3NQ%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3Ng%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3Mg%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3MQ%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3NA%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3OQ%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3Mw%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo3OA%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo4OQ%3D%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMDc%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMDg%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMDk%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMTA%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMTU%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMTY%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDoxMTc%3D"
          />
          <a
            class="TableRowLink-link-id"
            href="/products/UHJvZHVjdDo4NQ%3D%3D"
          />
          <table
            class="MuiTable-root-id ProductList-table-id"
          >
            <colgroup>
              <col />
              <col
                class="ProductList-colName-id"
              />
              <col
                class="ProductList-colType-id"
              />
              <col
                class="ProductList-colPublished-id"
              />
              <col
                class="ProductList-colPrice-id"
              />
            </colgroup>
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                  scope="col"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
                  data-test-id="col-name-header"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      <span
                        class="ProductList-colNameHeader-id"
                      >
                        Name
                      </span>
                    </div>
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="24"
                        width="24"
                      />
                      <path
                        clip-rule="evenodd"
                        d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                        fill="currentColor"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colType-id"
                  data-test-id="col-type-header"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Type
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPublished-id"
                  data-test-id="col-availability-header"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Availability
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPrice-id"
                  data-test-id="col-price-header"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Price
                    </div>
                  </div>
                </th>
              </tr>
            </thead>
            <tfoot
              class="MuiTableFooter-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id"
                  colspan="5"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                  >
                    <div
                      class="Pagination-spacer-id"
                    >
                      <div
                        class="Pagination-rowNumber-id"
                      >
                        <span
                          class="Pagination-rowNumberLabel-id"
                        >
                          No. of rows
                        </span>
                         20
                      </div>
                    </div>
                    <div
                      class="Pagination-actions-id"
                    >
                      <button
                        aria-label="previous page"
                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-back"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                          />
                        </svg>
                      </button>
                      <button
                        aria-label="next page"
                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-next"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                </td>
              </tr>
            </tfoot>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo2MQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Nebula Night Sky Paint
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo2NA=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Light Speed Yellow Paint
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo2NQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Hyperspace Turquoise Paint
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3NQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Pineapple Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3Ng=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Coconut Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3Mg=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Apple Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3MQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Orange Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3NA=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Banana Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3OQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Bean Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3Mw=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Carrot Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo3OA=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Green Juice
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo4OQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Code Division T-shirt
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMDc="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Polo Shirt
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMDg="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Polo Shirt
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMDk="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Polo Shirt
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMTA="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Polo Shirt
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMTU="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Black Hoodie
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMTY="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Blue Hoodie
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDoxMTc="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Mustard Hoodie
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test-id="id-UHJvZHVjdDo4NQ=="
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  data-test-id="table-cell-avatar"
                  thumbnail="placeholder255x255.png"
                >
                  <div
                    class="Avatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="Avatar-children-id"
                    >
                      <div
                        class="ProductList-colNameWrapper-id"
                      >
                        <span
                          data-test-id="name"
                        >
                          Colored Parrot Cushion
                        </span>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          Configurable
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
                  data-test-id="product-type"
                >
                  Cushion
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test-availability="true"
                  data-test-id="availability"
                >
                  <div
                    class="MuiChip-root-id Pill-root-id Pill-success-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id"
                    >
                      Published
                    </span>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test-id="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Products / Product variant details attribute errors 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Extended Hard
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <form>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Variants
                </span>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <a
                class="TableRowLink-link-id"
                href="/products/variant/var1"
              />
              <a
                class="TableRowLink-link-id"
                href="/products/variant/var2"
              />
              <a
                class="TableRowLink-link-id"
                href="/products/variant/var3"
              />
              <a
                class="TableRowLink-link-id"
                href="/products/variant/var4"
              />
              <table
                class="MuiTable-root-id"
              >
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id ProductVariantNavigation-link-id ProductVariantNavigation-tabActive-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        />
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                    >
                      Extended Hard
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        />
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                    >
                      Extended Soft
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        />
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                    >
                      Normal Hard
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        />
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                    >
                      Normal Soft
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                      colspan="3"
                    >
                      <a
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        data-test-id="button-add-variant"
                        href="/products/variant/add"
                        role="button"
                        tabindex="0"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Add variant
                        </span>
                      </a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
            </div>
            <div
              class="MuiPaper-root-id MuiAccordion-root-id VariantDetailsChannelsAvailabilityCardExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
            >
              <div
                class="MuiCardContent-root-id VariantDetailsChannelsAvailabilityCard-summaryContent-id"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id VariantDetailsChannelsAvailabilityCardExpanderSummary-root-id"
                  data-test-id="channels-variant-availability-summary"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiAccordionSummary-content-id VariantDetailsChannelsAvailabilityCardExpanderSummary-content-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      Available in 1 out of 2
                    </div>
                  </div>
                  <div
                    aria-disabled="false"
                    aria-hidden="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        data-test-id="expand-icon"
                        fill="none"
                        height="7"
                        viewBox="0 0 10 7"
                        width="10"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M1 1L5 5L9 1"
                          stroke="#28234A"
                          stroke-opacity="0.4"
                          stroke-width="2"
                        />
                      </svg>
                    </span>
                  </div>
                </div>
              </div>
              <div
                class="MuiCollapse-container-id MuiCollapse-hidden-id"
                style="min-height:0px"
              >
                <div
                  class="MuiCollapse-wrapper-id"
                >
                  <div
                    class="MuiCollapse-wrapperInner-id"
                  >
                    <div
                      role="region"
                    >
                      <hr
                        class="MuiDivider-root-id"
                      />
                      <div
                        class="MuiCardContent-root-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                          data-test-id="channels-variant-availability-item-title-test1"
                        >
                          Test channel
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                          data-test-id="channels-variant-availability-item-subtitle-test1"
                        >
                          Hidden
                        </div>
                      </div>
                      <hr
                        class="MuiDivider-root-id"
                      />
                      <div
                        class="MuiCardContent-root-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                          data-test-id="channels-variant-availability-item-title-test2"
                        >
                          Test channel other
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                          data-test-id="channels-variant-availability-item-subtitle-test2"
                        >
                          Published since Jan 21, 2022
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Variant Attributes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Attributes-cardContent-id"
            >
              <div
                class="Attributes-expansionBar-id"
              >
                <div
                  class="Attributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    1 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
                  data-test-id="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Attachment
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    class="AttributeRow-fileField-id"
                  >
                    <div
                      class="FileUploadField-uploadFileContent-id"
                    >
                      <div
                        class="FileUploadField-uploadFileName-id"
                      >
                        <a
                          class="FileUploadField-fileUrl-id"
                          href="some-non-existing-url"
                          target="blank"
                        >
                          File First Value
                        </a>
                      </div>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        data-test-id="button-delete-file"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                  <input
                    class="FileUploadField-fileField-id"
                    data-test-id="upload-file-input"
                    id="fileUpload"
                    name="attribute:Attachment"
                    type="file"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Variant Selection Attributes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Attributes-cardContent-id"
            >
              <div
                class="Attributes-expansionBar-id"
              >
                <div
                  class="Attributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    2 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
                  data-test-id="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Borders
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-149-label"
                    class="SingleAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                        data-shrink="false"
                      >
                        Value
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="true"
                          aria-labelledby="downshift-149-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-149-input"
                          type="text"
                          value="portals"
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="SingleAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Value
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                      <p
                        class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                      >
                        This field is required
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Legacy
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-150-label"
                    class="SingleAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Value
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-150-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-150-input"
                          type="text"
                          value="Auto Loan Account"
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="SingleAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Value
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Media
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Choose media
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductVariantMedia-root-id"
              >
                <img
                  alt="Extended version"
                  class="ProductVariantMedia-image-id"
                  src="placeholder60x60.png"
                />
                <img
                  alt="Front"
                  class="ProductVariantMedia-image-id"
                  src="placeholder60x60.png"
                />
                <img
                  alt="Cut version"
                  class="ProductVariantMedia-image-id"
                  src="placeholder60x60.png"
                />
                <img
                  alt="Back"
                  class="ProductVariantMedia-image-id"
                  src="placeholder60x60.png"
                />
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Pricing
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id ProductVariantPrice-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Channel Name
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariantPrice-colType-id"
                      scope="col"
                    >
                      Selling Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariantPrice-colType-id"
                      scope="col"
                    >
                      Cost price
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Test channel
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id MuiFormLabel-required-id MuiInputLabel-required-id"
                          data-shrink="true"
                        >
                          Price
                          <span
                            aria-hidden="true"
                            class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
                          >
                             *
                          </span>
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="test1-channel-price"
                            required=""
                            step="0.01"
                            type="number"
                            value="10"
                          />
                          <div
                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                            >
                              USD
                            </div>
                          </div>
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                            >
                              <span>
                                Price *
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                          data-shrink="true"
                        >
                          Cost
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="test1-channel-costPrice"
                            step="0.01"
                            type="number"
                            value="10"
                          />
                          <div
                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                            >
                              USD
                            </div>
                          </div>
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                            >
                              <span>
                                Cost
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Test channel other
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id MuiFormLabel-required-id MuiInputLabel-required-id"
                          data-shrink="true"
                        >
                          Price
                          <span
                            aria-hidden="true"
                            class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
                          >
                             *
                          </span>
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="test2-channel-price"
                            required=""
                            step="0.01"
                            type="number"
                            value="20"
                          />
                          <div
                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                            >
                              USD
                            </div>
                          </div>
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                            >
                              <span>
                                Price *
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                          data-shrink="true"
                        >
                          Cost
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="test2-channel-costPrice"
                            step="0.01"
                            type="number"
                            value="10"
                          />
                          <div
                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                            >
                              USD
                            </div>
                          </div>
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                            >
                              <span>
                                Cost
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Checkout limits
                  <div
                    class="MuiChip-root-id ProductVariantCheckoutSettings-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                    >
                      Preview
                    </span>
                  </div>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Limit quantity per checkout (optional)
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="none"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    min="1"
                    name="quantityLimitPerCustomer"
                    type="number"
                    value="300"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Limit quantity per checkout (optional)
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                >
                  Your customer won't be allowed to buy bigger quantity per checkout than shown here.
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Shipping
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Weight
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      name="weight"
                      type="text"
                      value="6"
                    />
                    <div
                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        KG
                      </div>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Weight
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Inventory
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductStocks-skuInputContainer-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    SKU (Stock Keeping Unit)
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="sku"
                      type="text"
                      value="1230959124123"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          SKU (Stock Keeping Unit)
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                  >
                    A product with this SKU already exists
                  </p>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="isPreorder"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Variant currently in preorder
                  <div
                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                    >
                      Preview
                    </span>
                  </div>
                </span>
              </label>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id ProductStocks-caption-id MuiTypography-caption-id"
              >
                Set up an end date of preorder. When end date will be reached product will be automatically taken from preorder to standard selling
              </div>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                name="hasPreorderEndDate"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  SETUP END DATE
                </span>
              </button>
              <div
                class="MuiTypography-root-id ProductStocks-preorderLimitInfo-id MuiTypography-caption-id"
              >
                Preordered products will be available in all warehouses. You can set a threshold for sold quantity. Leaving input blank will be interpreted as no limit to sale. Sold items will be allocated at the warehouse assigned to chosen shipping zone.
              </div>
              <div
                class="ProductStocks-thresholdRow-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id ProductStocks-thresholdInput-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Global threshold
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      name="globalThreshold"
                      type="text"
                      value="0"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Global threshold
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                  >
                    Threshold that cannot be exceeded even if per channel thresholds are still available
                  </p>
                </div>
                <div
                  class="MuiTypography-root-id ProductStocks-preorderItemsLeftCount-id MuiTypography-caption-id"
                >
                  0 units left
                </div>
              </div>
            </div>
            <table
              class="MuiTable-root-id"
            >
              <colgroup>
                <col
                  class="ProductStocks-colName-id"
                />
                <col
                  class="ProductStocks-colSoldUnits-id"
                />
                <col
                  class="ProductStocks-colThreshold-id"
                />
              </colgroup>
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colName-id"
                    scope="col"
                  >
                    Channels
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colSoldUnits-id"
                    scope="col"
                  >
                    Sold units
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colThreshold-id"
                    scope="col"
                  >
                    Channel threshold
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colName-id"
                  >
                    Test channel
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
                  >
                    0
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id ProductStocks-input-id"
                          min="0"
                          name="channel-threshold"
                          placeholder="Unlimited"
                          type="number"
                          value=""
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colName-id"
                  >
                    Test channel other
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
                  >
                    0
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id ProductStocks-input-id"
                          min="0"
                          name="channel-threshold"
                          placeholder="Unlimited"
                          type="number"
                          value=""
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.id"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          100023123
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
`;

exports[`Storyshots Views / Products / Product variant details no warehouses 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Extended Hard
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <form>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Variants
                </span>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <a
                class="TableRowLink-link-id"
                href="/products/variant/var1"
              />
              <a
                class="TableRowLink-link-id"
                href="/products/variant/var2"
              />
              <a
                class="TableRowLink-link-id"
                href="/products/variant/var3"
              />
              <a
                class="TableRowLink-link-id"
                href="/products/variant/var4"
              />
              <table
                class="MuiTable-root-id"
              >
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id ProductVariantNavigation-link-id ProductVariantNavigation-tabActive-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        />
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                    >
                      Extended Hard
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        />
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                    >
                      Extended Soft
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        />
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                    >
                      Normal Hard
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        />
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                    >
                      Normal Soft
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                      colspan="3"
                    >
                      <a
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        data-test-id="button-add-variant"
                        href="/products/variant/add"
                        role="button"
                        tabindex="0"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Add variant
                        </span>
                      </a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
            </div>
            <div
              class="MuiPaper-root-id MuiAccordion-root-id VariantDetailsChannelsAvailabilityCardExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
            >
              <div
                class="MuiCardContent-root-id VariantDetailsChannelsAvailabilityCard-summaryContent-id"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id VariantDetailsChannelsAvailabilityCardExpanderSummary-root-id"
                  data-test-id="channels-variant-availability-summary"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiAccordionSummary-content-id VariantDetailsChannelsAvailabilityCardExpanderSummary-content-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      Available in 1 out of 2
                    </div>
                  </div>
                  <div
                    aria-disabled="false"
                    aria-hidden="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        data-test-id="expand-icon"
                        fill="none"
                        height="7"
                        viewBox="0 0 10 7"
                        width="10"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M1 1L5 5L9 1"
                          stroke="#28234A"
                          stroke-opacity="0.4"
                          stroke-width="2"
                        />
                      </svg>
                    </span>
                  </div>
                </div>
              </div>
              <div
                class="MuiCollapse-container-id MuiCollapse-hidden-id"
                style="min-height:0px"
              >
                <div
                  class="MuiCollapse-wrapper-id"
                >
                  <div
                    class="MuiCollapse-wrapperInner-id"
                  >
                    <div
                      role="region"
                    >
                      <hr
                        class="MuiDivider-root-id"
                      />
                      <div
                        class="MuiCardContent-root-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                          data-test-id="channels-variant-availability-item-title-test1"
                        >
                          Test channel
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                          data-test-id="channels-variant-availability-item-subtitle-test1"
                        >
                          Hidden
                        </div>
                      </div>
                      <hr
                        class="MuiDivider-root-id"
                      />
                      <div
                        class="MuiCardContent-root-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                          data-test-id="channels-variant-availability-item-title-test2"
                        >
                          Test channel other
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                          data-test-id="channels-variant-availability-item-subtitle-test2"
                        >
                          Published since Jan 21, 2022
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Variant Attributes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Attributes-cardContent-id"
            >
              <div
                class="Attributes-expansionBar-id"
              >
                <div
                  class="Attributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    1 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
                  data-test-id="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Attachment
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    class="AttributeRow-fileField-id"
                  >
                    <div
                      class="FileUploadField-uploadFileContent-id"
                    >
                      <div
                        class="FileUploadField-uploadFileName-id"
                      >
                        <a
                          class="FileUploadField-fileUrl-id"
                          href="some-non-existing-url"
                          target="blank"
                        >
                          File First Value
                        </a>
                      </div>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        data-test-id="button-delete-file"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                  <input
                    class="FileUploadField-fileField-id"
                    data-test-id="upload-file-input"
                    id="fileUpload"
                    name="attribute:Attachment"
                    type="file"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Variant Selection Attributes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Attributes-cardContent-id"
            >
              <div
                class="Attributes-expansionBar-id"
              >
                <div
                  class="Attributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    2 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
                  data-test-id="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Borders
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-147-label"
                    class="SingleAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Value
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-147-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-147-input"
                          type="text"
                          value="portals"
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="SingleAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Value
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Legacy
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-148-label"
                    class="SingleAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Value
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-148-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-148-input"
                          type="text"
                          value="Auto Loan Account"
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="SingleAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Value
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Media
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Choose media
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductVariantMedia-root-id"
              >
                <img
                  alt="Extended version"
                  class="ProductVariantMedia-image-id"
                  src="placeholder60x60.png"
                />
                <img
                  alt="Front"
                  class="ProductVariantMedia-image-id"
                  src="placeholder60x60.png"
                />
                <img
                  alt="Cut version"
                  class="ProductVariantMedia-image-id"
                  src="placeholder60x60.png"
                />
                <img
                  alt="Back"
                  class="ProductVariantMedia-image-id"
                  src="placeholder60x60.png"
                />
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Pricing
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id ProductVariantPrice-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Channel Name
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariantPrice-colType-id"
                      scope="col"
                    >
                      Selling Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariantPrice-colType-id"
                      scope="col"
                    >
                      Cost price
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Test channel
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id MuiFormLabel-required-id MuiInputLabel-required-id"
                          data-shrink="true"
                        >
                          Price
                          <span
                            aria-hidden="true"
                            class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
                          >
                             *
                          </span>
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="test1-channel-price"
                            required=""
                            step="0.01"
                            type="number"
                            value="10"
                          />
                          <div
                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                            >
                              USD
                            </div>
                          </div>
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                            >
                              <span>
                                Price *
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                          data-shrink="true"
                        >
                          Cost
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="test1-channel-costPrice"
                            step="0.01"
                            type="number"
                            value="10"
                          />
                          <div
                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                            >
                              USD
                            </div>
                          </div>
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                            >
                              <span>
                                Cost
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Test channel other
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id MuiFormLabel-required-id MuiInputLabel-required-id"
                          data-shrink="true"
                        >
                          Price
                          <span
                            aria-hidden="true"
                            class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
                          >
                             *
                          </span>
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="test2-channel-price"
                            required=""
                            step="0.01"
                            type="number"
                            value="20"
                          />
                          <div
                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                            >
                              USD
                            </div>
                          </div>
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                            >
                              <span>
                                Price *
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                          data-shrink="true"
                        >
                          Cost
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="test2-channel-costPrice"
                            step="0.01"
                            type="number"
                            value="10"
                          />
                          <div
                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                            >
                              USD
                            </div>
                          </div>
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                            >
                              <span>
                                Cost
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Checkout limits
                  <div
                    class="MuiChip-root-id ProductVariantCheckoutSettings-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                    >
                      Preview
                    </span>
                  </div>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Limit quantity per checkout (optional)
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="none"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    min="1"
                    name="quantityLimitPerCustomer"
                    type="number"
                    value="300"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Limit quantity per checkout (optional)
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                >
                  Your customer won't be allowed to buy bigger quantity per checkout than shown here.
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Shipping
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Weight
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      name="weight"
                      type="text"
                      value="6"
                    />
                    <div
                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        KG
                      </div>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Weight
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Inventory
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductStocks-skuInputContainer-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    SKU (Stock Keeping Unit)
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="sku"
                      type="text"
                      value="1230959124123"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          SKU (Stock Keeping Unit)
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="isPreorder"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Variant currently in preorder
                  <div
                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                    >
                      Preview
                    </span>
                  </div>
                </span>
              </label>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id ProductStocks-caption-id MuiTypography-caption-id"
              >
                Set up an end date of preorder. When end date will be reached product will be automatically taken from preorder to standard selling
              </div>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                name="hasPreorderEndDate"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  SETUP END DATE
                </span>
              </button>
              <div
                class="MuiTypography-root-id ProductStocks-preorderLimitInfo-id MuiTypography-caption-id"
              >
                Preordered products will be available in all warehouses. You can set a threshold for sold quantity. Leaving input blank will be interpreted as no limit to sale. Sold items will be allocated at the warehouse assigned to chosen shipping zone.
              </div>
              <div
                class="ProductStocks-thresholdRow-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id ProductStocks-thresholdInput-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Global threshold
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      name="globalThreshold"
                      type="text"
                      value="0"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Global threshold
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                  >
                    Threshold that cannot be exceeded even if per channel thresholds are still available
                  </p>
                </div>
                <div
                  class="MuiTypography-root-id ProductStocks-preorderItemsLeftCount-id MuiTypography-caption-id"
                >
                  0 units left
                </div>
              </div>
            </div>
            <table
              class="MuiTable-root-id"
            >
              <colgroup>
                <col
                  class="ProductStocks-colName-id"
                />
                <col
                  class="ProductStocks-colSoldUnits-id"
                />
                <col
                  class="ProductStocks-colThreshold-id"
                />
              </colgroup>
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colName-id"
                    scope="col"
                  >
                    Channels
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colSoldUnits-id"
                    scope="col"
                  >
                    Sold units
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colThreshold-id"
                    scope="col"
                  >
                    Channel threshold
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colName-id"
                  >
                    Test channel
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
                  >
                    0
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id ProductStocks-input-id"
                          min="0"
                          name="channel-threshold"
                          placeholder="Unlimited"
                          type="number"
                          value=""
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colName-id"
                  >
                    Test channel other
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
                  >
                    0
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id ProductStocks-input-id"
                          min="0"
                          name="channel-threshold"
                          placeholder="Unlimited"
                          type="number"
                          value=""
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.id"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          100023123
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
`;

exports[`Storyshots Views / Products / Product variant details when loaded data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Extended Hard
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <form>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Variants
                </span>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <a
                class="TableRowLink-link-id"
                href="/products/variant/var1"
              />
              <a
                class="TableRowLink-link-id"
                href="/products/variant/var2"
              />
              <a
                class="TableRowLink-link-id"
                href="/products/variant/var3"
              />
              <a
                class="TableRowLink-link-id"
                href="/products/variant/var4"
              />
              <table
                class="MuiTable-root-id"
              >
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id ProductVariantNavigation-link-id ProductVariantNavigation-tabActive-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        />
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                    >
                      Extended Hard
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        />
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                    >
                      Extended Soft
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        />
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                    >
                      Normal Hard
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      data-test-id="table-cell-avatar"
                      thumbnail="placeholder60x60.png"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id"
                        >
                          <img
                            class="MuiAvatar-img-id"
                            src="placeholder60x60.png"
                          />
                        </div>
                        <div
                          class="Avatar-children-id"
                        />
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                    >
                      Normal Soft
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                      colspan="3"
                    >
                      <a
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        data-test-id="button-add-variant"
                        href="/products/variant/add"
                        role="button"
                        tabindex="0"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Add variant
                        </span>
                      </a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
            </div>
            <div
              class="MuiPaper-root-id MuiAccordion-root-id VariantDetailsChannelsAvailabilityCardExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
            >
              <div
                class="MuiCardContent-root-id VariantDetailsChannelsAvailabilityCard-summaryContent-id"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id VariantDetailsChannelsAvailabilityCardExpanderSummary-root-id"
                  data-test-id="channels-variant-availability-summary"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiAccordionSummary-content-id VariantDetailsChannelsAvailabilityCardExpanderSummary-content-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      Available in 1 out of 2
                    </div>
                  </div>
                  <div
                    aria-disabled="false"
                    aria-hidden="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        data-test-id="expand-icon"
                        fill="none"
                        height="7"
                        viewBox="0 0 10 7"
                        width="10"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M1 1L5 5L9 1"
                          stroke="#28234A"
                          stroke-opacity="0.4"
                          stroke-width="2"
                        />
                      </svg>
                    </span>
                  </div>
                </div>
              </div>
              <div
                class="MuiCollapse-container-id MuiCollapse-hidden-id"
                style="min-height:0px"
              >
                <div
                  class="MuiCollapse-wrapper-id"
                >
                  <div
                    class="MuiCollapse-wrapperInner-id"
                  >
                    <div
                      role="region"
                    >
                      <hr
                        class="MuiDivider-root-id"
                      />
                      <div
                        class="MuiCardContent-root-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                          data-test-id="channels-variant-availability-item-title-test1"
                        >
                          Test channel
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                          data-test-id="channels-variant-availability-item-subtitle-test1"
                        >
                          Hidden
                        </div>
                      </div>
                      <hr
                        class="MuiDivider-root-id"
                      />
                      <div
                        class="MuiCardContent-root-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                          data-test-id="channels-variant-availability-item-title-test2"
                        >
                          Test channel other
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                          data-test-id="channels-variant-availability-item-subtitle-test2"
                        >
                          Published since Jan 21, 2022
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Variant Attributes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Attributes-cardContent-id"
            >
              <div
                class="Attributes-expansionBar-id"
              >
                <div
                  class="Attributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    1 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
                  data-test-id="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Attachment
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    class="AttributeRow-fileField-id"
                  >
                    <div
                      class="FileUploadField-uploadFileContent-id"
                    >
                      <div
                        class="FileUploadField-uploadFileName-id"
                      >
                        <a
                          class="FileUploadField-fileUrl-id"
                          href="some-non-existing-url"
                          target="blank"
                        >
                          File First Value
                        </a>
                      </div>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        data-test-id="button-delete-file"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                  <input
                    class="FileUploadField-fileField-id"
                    data-test-id="upload-file-input"
                    id="fileUpload"
                    name="attribute:Attachment"
                    type="file"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Variant Selection Attributes
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Attributes-cardContent-id"
            >
              <div
                class="Attributes-expansionBar-id"
              >
                <div
                  class="Attributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    2 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
                  data-test-id="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Borders
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-145-label"
                    class="SingleAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Value
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-145-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-145-input"
                          type="text"
                          value="portals"
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="SingleAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Value
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test-id="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Legacy
                  </div>
                </div>
                <div
                  class="BasicAttributeRow-value-id"
                  data-test-id="attribute-value"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-146-label"
                    class="SingleAutocompleteSelectField-container-id"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Value
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-146-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-146-input"
                          type="text"
                          value="Auto Loan Account"
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="SingleAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Value
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Media
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Choose media
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductVariantMedia-root-id"
              >
                <img
                  alt="Extended version"
                  class="ProductVariantMedia-image-id"
                  src="placeholder60x60.png"
                />
                <img
                  alt="Front"
                  class="ProductVariantMedia-image-id"
                  src="placeholder60x60.png"
                />
                <img
                  alt="Cut version"
                  class="ProductVariantMedia-image-id"
                  src="placeholder60x60.png"
                />
                <img
                  alt="Back"
                  class="ProductVariantMedia-image-id"
                  src="placeholder60x60.png"
                />
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Pricing
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id ProductVariantPrice-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Channel Name
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariantPrice-colType-id"
                      scope="col"
                    >
                      Selling Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariantPrice-colType-id"
                      scope="col"
                    >
                      Cost price
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Test channel
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id MuiFormLabel-required-id MuiInputLabel-required-id"
                          data-shrink="true"
                        >
                          Price
                          <span
                            aria-hidden="true"
                            class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
                          >
                             *
                          </span>
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="test1-channel-price"
                            required=""
                            step="0.01"
                            type="number"
                            value="10"
                          />
                          <div
                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                            >
                              USD
                            </div>
                          </div>
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                            >
                              <span>
                                Price *
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                          data-shrink="true"
                        >
                          Cost
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="test1-channel-costPrice"
                            step="0.01"
                            type="number"
                            value="10"
                          />
                          <div
                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                            >
                              USD
                            </div>
                          </div>
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                            >
                              <span>
                                Cost
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Test channel other
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id MuiFormLabel-required-id MuiInputLabel-required-id"
                          data-shrink="true"
                        >
                          Price
                          <span
                            aria-hidden="true"
                            class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
                          >
                             *
                          </span>
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="test2-channel-price"
                            required=""
                            step="0.01"
                            type="number"
                            value="20"
                          />
                          <div
                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                            >
                              USD
                            </div>
                          </div>
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                            >
                              <span>
                                Price *
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                          data-shrink="true"
                        >
                          Cost
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                            min="0"
                            name="test2-channel-costPrice"
                            step="0.01"
                            type="number"
                            value="10"
                          />
                          <div
                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                            >
                              USD
                            </div>
                          </div>
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                            >
                              <span>
                                Cost
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Checkout limits
                  <div
                    class="MuiChip-root-id ProductVariantCheckoutSettings-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                    >
                      Preview
                    </span>
                  </div>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Limit quantity per checkout (optional)
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="none"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    min="1"
                    name="quantityLimitPerCustomer"
                    type="number"
                    value="300"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Limit quantity per checkout (optional)
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                >
                  Your customer won't be allowed to buy bigger quantity per checkout than shown here.
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Shipping
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Weight
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      name="weight"
                      type="text"
                      value="6"
                    />
                    <div
                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        KG
                      </div>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Weight
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Inventory
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductStocks-skuInputContainer-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    SKU (Stock Keeping Unit)
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="sku"
                      type="text"
                      value="1230959124123"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          SKU (Stock Keeping Unit)
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="isPreorder"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Variant currently in preorder
                  <div
                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                    >
                      Preview
                    </span>
                  </div>
                </span>
              </label>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id ProductStocks-caption-id MuiTypography-caption-id"
              >
                Set up an end date of preorder. When end date will be reached product will be automatically taken from preorder to standard selling
              </div>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                name="hasPreorderEndDate"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  SETUP END DATE
                </span>
              </button>
              <div
                class="MuiTypography-root-id ProductStocks-preorderLimitInfo-id MuiTypography-caption-id"
              >
                Preordered products will be available in all warehouses. You can set a threshold for sold quantity. Leaving input blank will be interpreted as no limit to sale. Sold items will be allocated at the warehouse assigned to chosen shipping zone.
              </div>
              <div
                class="ProductStocks-thresholdRow-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id ProductStocks-thresholdInput-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Global threshold
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      name="globalThreshold"
                      type="text"
                      value="0"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Global threshold
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                  >
                    Threshold that cannot be exceeded even if per channel thresholds are still available
                  </p>
                </div>
                <div
                  class="MuiTypography-root-id ProductStocks-preorderItemsLeftCount-id MuiTypography-caption-id"
                >
                  0 units left
                </div>
              </div>
            </div>
            <table
              class="MuiTable-root-id"
            >
              <colgroup>
                <col
                  class="ProductStocks-colName-id"
                />
                <col
                  class="ProductStocks-colSoldUnits-id"
                />
                <col
                  class="ProductStocks-colThreshold-id"
                />
              </colgroup>
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colName-id"
                    scope="col"
                  >
                    Channels
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colSoldUnits-id"
                    scope="col"
                  >
                    Sold units
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colThreshold-id"
                    scope="col"
                  >
                    Channel threshold
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colName-id"
                  >
                    Test channel
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
                  >
                    0
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id ProductStocks-input-id"
                          min="0"
                          name="channel-threshold"
                          placeholder="Unlimited"
                          type="number"
                          value=""
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colName-id"
                  >
                    Test channel other
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
                  >
                    0
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id ProductStocks-input-id"
                          min="0"
                          name="channel-threshold"
                          placeholder="Unlimited"
                          type="number"
                          value=""
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 string
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
                    scope="col"
                  >
                    Field
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
                    scope="col"
                  >
                    Value
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
                    scope="col"
                  >
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                  data-test-id="field"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
                          name="name:0"
                          type="text"
                          value="integration.id"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                      >
                        <textarea
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          name="value:0"
                          rows="1"
                        >
                          100023123
                        </textarea>
                        <textarea
                          aria-hidden="true"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                          readonly=""
                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                          tabindex="-1"
                        />
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      data-test-id="delete-field-0"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
`;

exports[`Storyshots Views / Products / Product variant details when loading data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          <span
            class="Skeleton-skeleton-id"
            data-test-id="skeleton"
            style="width:10em"
          >
            ‌
          </span>
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <form>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Variants
                </span>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id ProductVariantNavigation-link-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          clip-rule="evenodd"
                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                          fill="currentColor"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      data-test-id="table-cell-avatar"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              clip-rule="evenodd"
                              d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
                              fill="currentColor"
                              fill-rule="evenodd"
                            />
                          </svg>
                        </div>
                        <div
                          class="Avatar-children-id"
                        />
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                      colspan="3"
                    >
                      <a
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                        data-test-id="button-add-variant"
                        href="/products/variant/add"
                        role="button"
                        tabindex="0"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Add variant
                        </span>
                      </a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Media
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Choose media
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductVariantMedia-root-id"
              >
                <div
                  class="MuiTypography-root-id ProductVariantMedia-helpText-id MuiTypography-body1-id"
                >
                  Select a specific variant media from product media
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Pricing
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Assign this variant to a channel in the product channel manager to define prices
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Checkout limits
                  <div
                    class="MuiChip-root-id ProductVariantCheckoutSettings-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                    >
                      Preview
                    </span>
                  </div>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Limit quantity per checkout (optional)
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="none"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    min="1"
                    name="quantityLimitPerCustomer"
                    type="number"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Limit quantity per checkout (optional)
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
                >
                  Your customer won't be allowed to buy bigger quantity per checkout than shown here.
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Shipping
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Weight
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      disabled=""
                      min="0"
                      name="weight"
                      type="text"
                      value=""
                    />
                    <div
                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        kg
                      </div>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Weight
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Inventory
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductStocks-skuInputContainer-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    SKU (Stock Keeping Unit)
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="sku"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          SKU (Stock Keeping Unit)
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      name="isPreorder"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Variant currently in preorder
                  <div
                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                  >
                    <span
                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                    >
                      Preview
                    </span>
                  </div>
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      name="trackInventory"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Track Inventory
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    Active inventory tracking will automatically calculate changes of stock
                  </div>
                </span>
              </label>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id ProductStocks-quantityContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <div
                  class="ProductStocks-quantityHeader-id"
                >
                  <span>
                    Quantity
                  </span>
                </div>
              </div>
            </div>
            <table
              class="MuiTable-root-id"
            >
              <colgroup>
                <col
                  class="ProductStocks-colName-id"
                />
                <col
                  class="ProductStocks-colQuantity-id"
                />
                <col
                  class="ProductStocks-colQuantity-id"
                />
              </colgroup>
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colName-id"
                    scope="col"
                  >
                    Warehouse Name
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colQuantity-id"
                    scope="col"
                  >
                    Allocated
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colQuantity-id"
                    scope="col"
                  >
                    Quantity
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colAction-id"
                    scope="col"
                  />
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                    colspan="3"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body2-id"
                    >
                      Assign Warehouse
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colAction-id"
                  >
                    <div>
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        data-test-id="add-warehouse"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="25"
                          viewBox="0 0 24 25"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M6 12h12m-6-6v12"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
`;

exports[`Storyshots Views / Shipping / Create shipping zone default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Create New Shipping Zone
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Shipping zone name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    data-test-id="name"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Shipping zone name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  <div
                    class="ShippingZoneCreatePage-labelContainer-id"
                  >
                    <div
                      class="ShippingZoneCreatePage-label-id"
                    >
                      Description (optional)
                    </div>
                  </div>
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    maxlength="300"
                    name="description"
                    placeholder="Description of a shipping zone."
                    rows="10"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        <div
                          class="ShippingZoneCreatePage-labelContainer-id"
                        >
                          <div
                            class="ShippingZoneCreatePage-label-id"
                          >
                            Description (optional)
                          </div>
                        </div>
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Countries
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="assign-country"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign countries
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id CountryList-pointer-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-wideColumn-id CountryList-toLeft-id"
                    >
                      0 Countries
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id CountryList-iconCell-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          data-test-id="countries-drop-down-icon"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Shipping / Create shipping zone form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Create New Shipping Zone
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                  data-shrink="false"
                >
                  Shipping zone name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    data-test-id="name"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Shipping zone name
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Invalid value
                </p>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  <div
                    class="ShippingZoneCreatePage-labelContainer-id"
                  >
                    <div
                      class="ShippingZoneCreatePage-label-id"
                    >
                      Description (optional)
                    </div>
                  </div>
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    maxlength="300"
                    name="description"
                    placeholder="Description of a shipping zone."
                    rows="10"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        <div
                          class="ShippingZoneCreatePage-labelContainer-id"
                        >
                          <div
                            class="ShippingZoneCreatePage-label-id"
                          >
                            Description (optional)
                          </div>
                        </div>
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Countries
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="assign-country"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign countries
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id CountryList-pointer-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-wideColumn-id CountryList-toLeft-id"
                    >
                      0 Countries
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id CountryList-iconCell-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          data-test-id="countries-drop-down-icon"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Shipping / Create shipping zone loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Create New Shipping Zone
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Shipping zone name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    data-test-id="name"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Shipping zone name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  <div
                    class="ShippingZoneCreatePage-labelContainer-id"
                  >
                    <div
                      class="ShippingZoneCreatePage-label-id"
                    >
                      Description (optional)
                    </div>
                  </div>
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    disabled=""
                    maxlength="300"
                    name="description"
                    placeholder="Description of a shipping zone."
                    rows="10"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        <div
                          class="ShippingZoneCreatePage-labelContainer-id"
                        >
                          <div
                            class="ShippingZoneCreatePage-label-id"
                          >
                            Description (optional)
                          </div>
                        </div>
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Countries
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  data-test-id="assign-country"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign countries
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id CountryList-pointer-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-wideColumn-id CountryList-toLeft-id"
                    >
                      0 Countries
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id CountryList-iconCell-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          data-test-id="countries-drop-down-icon"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Shipping / Shipping rate create price rate 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            DB Schenker
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Shipping rate name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="DB Schenker"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Shipping rate name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-description"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Shipping Rate Description
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                />
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="ShippingRateInfo-deliveryTimeFields-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Min Delivery Time
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      name="minDays"
                      type="number"
                      value="0"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Min Delivery Time
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Max Delivery Time
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      name="maxDays"
                      type="number"
                      value="10"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Max Delivery Time
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Order Value
                </span>
              </div>
            </div>
            <div
              class="OrderValue-content-id"
            >
              <div
                class="OrderValue-subheader-id"
              >
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        checked=""
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="orderValueRestricted"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <svg
                          fill="none"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <rect
                            fill="currentColor"
                            height="23"
                            rx="1.5"
                            width="23"
                            x="0.5"
                            y="0.5"
                          />
                          <path
                            clip-rule="evenodd"
                            d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                            fill="var(--background-paper)"
                            fill-rule="evenodd"
                          />
                        </svg>
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Restrict order value
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      This rate will apply to all orders
                    </div>
                  </span>
                </label>
                <div
                  class="VerticalSpacer-container-id VerticalSpacer-container-id"
                />
                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
                <div
                  class="VerticalSpacer-container-id VerticalSpacer-container-id"
                />
              </div>
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id OrderValue-table-id"
                >
                  <thead
                    class="MuiTableHead-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                    >
                      <th
                        class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colName-id"
                        scope="col"
                      >
                        <span>
                          Channel name
                        </span>
                      </th>
                      <th
                        class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colType-id"
                        scope="col"
                      >
                        <span>
                          Min. value
                        </span>
                      </th>
                      <th
                        class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colType-id"
                        scope="col"
                      >
                        <span>
                          Max. value
                        </span>
                      </th>
                    </tr>
                  </thead>
                  <tbody
                    class="MuiTableBody-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-hover-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          channel
                        </div>
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id OrderValue-price-id"
                      >
                        <div
                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                        >
                          <label
                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                            data-shrink="false"
                          >
                            Min Value
                          </label>
                          <div
                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                          >
                            <input
                              aria-invalid="false"
                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                              min="0"
                              name="minValue:channel"
                              step="0.01"
                              type="number"
                              value=""
                            />
                            <div
                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                              >
                                USD
                              </div>
                            </div>
                            <fieldset
                              aria-hidden="true"
                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            >
                              <legend
                                class="PrivateNotchedOutline-legendLabelled-id"
                              >
                                <span>
                                  Min Value
                                </span>
                              </legend>
                            </fieldset>
                          </div>
                        </div>
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id OrderValue-price-id"
                      >
                        <div
                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                        >
                          <label
                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                            data-shrink="false"
                          >
                            Max Value
                          </label>
                          <div
                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                          >
                            <input
                              aria-invalid="false"
                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                              min=""
                              name="maxValue:channel"
                              step="0.01"
                              type="number"
                              value=""
                            />
                            <div
                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                              >
                                USD
                              </div>
                            </div>
                            <fieldset
                              aria-hidden="true"
                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            >
                              <legend
                                class="PrivateNotchedOutline-legendLabelled-id"
                              >
                                <span>
                                  Max Value
                                </span>
                              </legend>
                            </fieldset>
                          </div>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Pricing
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id PricingCard-pricingContent-id"
            >
              <div
                class="MuiTypography-root-id PricingCard-caption-id MuiTypography-caption-id"
              >
                Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
              </div>
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id PricingCard-table-id"
                >
                  <thead
                    class="MuiTableHead-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                    >
                      <th
                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colName-id"
                        scope="col"
                      >
                        <span>
                          Channel name
                        </span>
                      </th>
                      <th
                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colType-id"
                        scope="col"
                      >
                        <span>
                          Price
                        </span>
                      </th>
                    </tr>
                  </thead>
                  <tbody
                    class="MuiTableBody-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-hover-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          channel
                        </div>
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id"
                      >
                        <div
                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                        >
                          <label
                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-required-id MuiInputLabel-required-id"
                            data-shrink="false"
                          >
                            Price
                            <span
                              aria-hidden="true"
                              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
                            >
                               *
                            </span>
                          </label>
                          <div
                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                          >
                            <input
                              aria-invalid="false"
                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                              min="0"
                              name="price"
                              required=""
                              step="0.01"
                              type="number"
                              value=""
                            />
                            <div
                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                              >
                                USD
                              </div>
                            </div>
                            <fieldset
                              aria-hidden="true"
                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            >
                              <legend
                                class="PrivateNotchedOutline-legendLabelled-id"
                              >
                                <span>
                                  Price *
                                </span>
                              </legend>
                            </fieldset>
                          </div>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Postal codes
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="add-postal-code-range"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Add postal code range
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id ShippingZonePostalCodes-radioContainer-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="includePostalCodes"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="includePostalCodes"
                          type="radio"
                          value="EXCLUDE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      <div
                        class="ShippingZonePostalCodes-option-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Exclude postal codes
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          Added postal codes will be excluded from using this delivery methods. If none are added all postal codes will be able to use that shipping rate
                        </div>
                      </div>
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="includePostalCodes"
                          type="radio"
                          value="INCLUDE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      <div
                        class="ShippingZonePostalCodes-option-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Include postal codes
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          Only added postal codes will be able to use this shipping rate
                        </div>
                      </div>
                    </span>
                  </label>
                </div>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <colgroup>
                  <col />
                  <col
                    class="ShippingZonePostalCodes-colAction-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        0 postal code ranges
                      </div>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id ShippingZonePostalCodes-arrow-id ShippingZonePostalCodes-arrowRotate-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <g
                            style="fill-rule:evenodd"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                          </g>
                        </svg>
                      </button>
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                      colspan="2"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        This shipping rate has no postal codes assigned
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Excluded Products
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign products
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id ShippingMethodProducts-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                      scope="col"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingMethodProducts-colProductName-id"
                      scope="col"
                    >
                      Product Name
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingMethodProducts-colAction-id"
                      scope="col"
                    >
                      Actions
                    </th>
                  </tr>
                </thead>
                <tfoot
                  class="MuiTableFooter-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id"
                      colspan="3"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                      >
                        <div
                          class="Pagination-spacer-id"
                        />
                        <div
                          class="Pagination-actions-id"
                        >
                          <button
                            aria-label="previous page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                              />
                            </svg>
                          </button>
                          <button
                            aria-label="next page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-next"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                              />
                            </svg>
                          </button>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tfoot>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ShippingMethodProducts-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail=""
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              clip-rule="evenodd"
                              d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
                              fill="currentColor"
                              fill-rule="evenodd"
                            />
                          </svg>
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body2-id"
                          >
                            Apple Juice
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingMethodProducts-colAction-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 1 out of 3 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Shipping / Shipping rate create weight rate 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            DB Schenker
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Shipping rate name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="DB Schenker"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Shipping rate name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-description"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Shipping Rate Description
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                />
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="ShippingRateInfo-deliveryTimeFields-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Min Delivery Time
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      name="minDays"
                      type="number"
                      value="0"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Min Delivery Time
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Max Delivery Time
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      name="maxDays"
                      type="number"
                      value="10"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Max Delivery Time
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Order Weight
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="orderValueRestricted"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Restrict order weight
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    This rate will apply to all orders
                  </div>
                </span>
              </label>
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <div
                class="OrderWeight-grid-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Min. Order Weight
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      name="minValue"
                      type="number"
                      value="0"
                    />
                    <div
                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      />
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Min. Order Weight
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Max. Order Weight
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      name="maxValue"
                      type="number"
                      value="80"
                    />
                    <div
                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      />
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Max. Order Weight
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Pricing
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id PricingCard-pricingContent-id"
            >
              <div
                class="MuiTypography-root-id PricingCard-caption-id MuiTypography-caption-id"
              >
                Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
              </div>
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id PricingCard-table-id"
                >
                  <thead
                    class="MuiTableHead-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                    >
                      <th
                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colName-id"
                        scope="col"
                      >
                        <span>
                          Channel name
                        </span>
                      </th>
                      <th
                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colType-id"
                        scope="col"
                      >
                        <span>
                          Price
                        </span>
                      </th>
                    </tr>
                  </thead>
                  <tbody
                    class="MuiTableBody-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-hover-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          channel
                        </div>
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id"
                      >
                        <div
                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                        >
                          <label
                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-required-id MuiInputLabel-required-id"
                            data-shrink="false"
                          >
                            Price
                            <span
                              aria-hidden="true"
                              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
                            >
                               *
                            </span>
                          </label>
                          <div
                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                          >
                            <input
                              aria-invalid="false"
                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                              min="0"
                              name="price"
                              required=""
                              step="0.01"
                              type="number"
                              value=""
                            />
                            <div
                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                              >
                                USD
                              </div>
                            </div>
                            <fieldset
                              aria-hidden="true"
                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            >
                              <legend
                                class="PrivateNotchedOutline-legendLabelled-id"
                              >
                                <span>
                                  Price *
                                </span>
                              </legend>
                            </fieldset>
                          </div>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Postal codes
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="add-postal-code-range"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Add postal code range
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id ShippingZonePostalCodes-radioContainer-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="includePostalCodes"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="includePostalCodes"
                          type="radio"
                          value="EXCLUDE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      <div
                        class="ShippingZonePostalCodes-option-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Exclude postal codes
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          Added postal codes will be excluded from using this delivery methods. If none are added all postal codes will be able to use that shipping rate
                        </div>
                      </div>
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="includePostalCodes"
                          type="radio"
                          value="INCLUDE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      <div
                        class="ShippingZonePostalCodes-option-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Include postal codes
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          Only added postal codes will be able to use this shipping rate
                        </div>
                      </div>
                    </span>
                  </label>
                </div>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <colgroup>
                  <col />
                  <col
                    class="ShippingZonePostalCodes-colAction-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        0 postal code ranges
                      </div>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id ShippingZonePostalCodes-arrow-id ShippingZonePostalCodes-arrowRotate-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <g
                            style="fill-rule:evenodd"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                          </g>
                        </svg>
                      </button>
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                      colspan="2"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        This shipping rate has no postal codes assigned
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Excluded Products
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign products
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id ShippingMethodProducts-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                      scope="col"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingMethodProducts-colProductName-id"
                      scope="col"
                    >
                      Product Name
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingMethodProducts-colAction-id"
                      scope="col"
                    >
                      Actions
                    </th>
                  </tr>
                </thead>
                <tfoot
                  class="MuiTableFooter-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id"
                      colspan="3"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                      >
                        <div
                          class="Pagination-spacer-id"
                        />
                        <div
                          class="Pagination-actions-id"
                        >
                          <button
                            aria-label="previous page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                              />
                            </svg>
                          </button>
                          <button
                            aria-label="next page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-next"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                              />
                            </svg>
                          </button>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tfoot>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ShippingMethodProducts-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail=""
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              clip-rule="evenodd"
                              d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
                              fill="currentColor"
                              fill-rule="evenodd"
                            />
                          </svg>
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body2-id"
                          >
                            Apple Juice
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingMethodProducts-colAction-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 1 out of 3 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Shipping / Shipping rate loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
              style="width:10em"
            >
              ‌
            </span>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Shipping rate name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Shipping rate name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-description"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Shipping Rate Description
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
                />
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="ShippingRateInfo-deliveryTimeFields-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Min Delivery Time
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      min="0"
                      name="minDays"
                      type="number"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Min Delivery Time
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Max Delivery Time
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      min="0"
                      name="maxDays"
                      type="number"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Max Delivery Time
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Order Value
                </span>
              </div>
            </div>
            <div
              class="OrderValue-content-id"
            >
              <div
                class="OrderValue-subheader-id"
              >
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <span
                    aria-disabled="true"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                    tabindex="-1"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        disabled=""
                        name="orderValueRestricted"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Restrict order value
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      This rate will apply to all orders
                    </div>
                  </span>
                </label>
                <div
                  class="VerticalSpacer-container-id VerticalSpacer-container-id"
                />
                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
                <div
                  class="VerticalSpacer-container-id VerticalSpacer-container-id"
                />
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Pricing
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id PricingCard-pricingContent-id"
            >
              <div
                class="MuiTypography-root-id PricingCard-caption-id MuiTypography-caption-id"
              >
                Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
              </div>
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id PricingCard-table-id"
                >
                  <thead
                    class="MuiTableHead-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                    >
                      <th
                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colName-id"
                        scope="col"
                      >
                        <span>
                          Channel name
                        </span>
                      </th>
                      <th
                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colType-id"
                        scope="col"
                      >
                        <span>
                          Price
                        </span>
                      </th>
                    </tr>
                  </thead>
                  <tbody
                    class="MuiTableBody-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-hover-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          channel
                        </div>
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id"
                      >
                        <div
                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                        >
                          <label
                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-required-id MuiInputLabel-required-id"
                            data-shrink="false"
                          >
                            Price
                            <span
                              aria-hidden="true"
                              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
                            >
                               *
                            </span>
                          </label>
                          <div
                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                          >
                            <input
                              aria-invalid="false"
                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                              disabled=""
                              min="0"
                              name="price"
                              required=""
                              step="0.01"
                              type="number"
                              value=""
                            />
                            <div
                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                              >
                                USD
                              </div>
                            </div>
                            <fieldset
                              aria-hidden="true"
                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            >
                              <legend
                                class="PrivateNotchedOutline-legendLabelled-id"
                              >
                                <span>
                                  Price *
                                </span>
                              </legend>
                            </fieldset>
                          </div>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Postal codes
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="add-postal-code-range"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Add postal code range
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id ShippingZonePostalCodes-radioContainer-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="includePostalCodes"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="includePostalCodes"
                          type="radio"
                          value="EXCLUDE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      <div
                        class="ShippingZonePostalCodes-option-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Exclude postal codes
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          Added postal codes will be excluded from using this delivery methods. If none are added all postal codes will be able to use that shipping rate
                        </div>
                      </div>
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="includePostalCodes"
                          type="radio"
                          value="INCLUDE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      <div
                        class="ShippingZonePostalCodes-option-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Include postal codes
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          Only added postal codes will be able to use this shipping rate
                        </div>
                      </div>
                    </span>
                  </label>
                </div>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <colgroup>
                  <col />
                  <col
                    class="ShippingZonePostalCodes-colAction-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        0 postal code ranges
                      </div>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id ShippingZonePostalCodes-arrow-id ShippingZonePostalCodes-arrowRotate-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <g
                            style="fill-rule:evenodd"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                          </g>
                        </svg>
                      </button>
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                      colspan="2"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        This shipping rate has no postal codes assigned
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Excluded Products
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign products
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id ShippingMethodProducts-table-id"
              >
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="true"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        tabindex="-1"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            disabled=""
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ShippingMethodProducts-colName-id"
                      data-test-id="table-cell-avatar"
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              clip-rule="evenodd"
                              d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
                              fill="currentColor"
                              fill-rule="evenodd"
                            />
                          </svg>
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          <span
                            class="Skeleton-skeleton-id"
                            data-test-id="skeleton"
                          >
                            ‌
                          </span>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingMethodProducts-colAction-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 1 out of 3 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Shipping / Shipping rate update price rate 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            UPS
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Shipping rate name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="UPS"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Shipping rate name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-description"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Shipping Rate Description
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                />
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="ShippingRateInfo-deliveryTimeFields-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Min Delivery Time
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      name="minDays"
                      type="number"
                      value="0"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Min Delivery Time
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Max Delivery Time
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      name="maxDays"
                      type="number"
                      value="10"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Max Delivery Time
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Order Value
                </span>
              </div>
            </div>
            <div
              class="OrderValue-content-id"
            >
              <div
                class="OrderValue-subheader-id"
              >
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <span
                    aria-disabled="false"
                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <input
                        class="PrivateSwitchBase-input-id"
                        data-indeterminate="false"
                        name="orderValueRestricted"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <rect
                          fill="transparent"
                          height="22"
                          rx="2"
                          ry="2"
                          stroke="currentColor"
                          stroke-linejoin="round"
                          stroke-width="2"
                          width="22"
                          x="1"
                          y="1"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Restrict order value
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      This rate will apply to all orders
                    </div>
                  </span>
                </label>
                <div
                  class="VerticalSpacer-container-id VerticalSpacer-container-id"
                />
                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
                <div
                  class="VerticalSpacer-container-id VerticalSpacer-container-id"
                />
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Pricing
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id PricingCard-pricingContent-id"
            >
              <div
                class="MuiTypography-root-id PricingCard-caption-id MuiTypography-caption-id"
              >
                Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
              </div>
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id PricingCard-table-id"
                >
                  <thead
                    class="MuiTableHead-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                    >
                      <th
                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colName-id"
                        scope="col"
                      >
                        <span>
                          Channel name
                        </span>
                      </th>
                      <th
                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colType-id"
                        scope="col"
                      >
                        <span>
                          Price
                        </span>
                      </th>
                    </tr>
                  </thead>
                  <tbody
                    class="MuiTableBody-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-hover-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          channel
                        </div>
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id"
                      >
                        <div
                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                        >
                          <label
                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id MuiFormLabel-required-id MuiInputLabel-required-id"
                            data-shrink="true"
                          >
                            Price
                            <span
                              aria-hidden="true"
                              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
                            >
                               *
                            </span>
                          </label>
                          <div
                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                          >
                            <input
                              aria-invalid="false"
                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                              min="0"
                              name="price"
                              required=""
                              step="0.01"
                              type="number"
                              value="5"
                            />
                            <div
                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                              >
                                USD
                              </div>
                            </div>
                            <fieldset
                              aria-hidden="true"
                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            >
                              <legend
                                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                              >
                                <span>
                                  Price *
                                </span>
                              </legend>
                            </fieldset>
                          </div>
                        </div>
                      </td>
                    </tr>
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-hover-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          test
                        </div>
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id"
                      >
                        <div
                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                        >
                          <label
                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id MuiFormLabel-required-id MuiInputLabel-required-id"
                            data-shrink="true"
                          >
                            Price
                            <span
                              aria-hidden="true"
                              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
                            >
                               *
                            </span>
                          </label>
                          <div
                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                          >
                            <input
                              aria-invalid="false"
                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                              min="0"
                              name="price"
                              required=""
                              step="0.01"
                              type="number"
                              value="6"
                            />
                            <div
                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                              >
                                USD
                              </div>
                            </div>
                            <fieldset
                              aria-hidden="true"
                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            >
                              <legend
                                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                              >
                                <span>
                                  Price *
                                </span>
                              </legend>
                            </fieldset>
                          </div>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Postal codes
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="add-postal-code-range"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Add postal code range
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id ShippingZonePostalCodes-radioContainer-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="includePostalCodes"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="includePostalCodes"
                          type="radio"
                          value="EXCLUDE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      <div
                        class="ShippingZonePostalCodes-option-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Exclude postal codes
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          Added postal codes will be excluded from using this delivery methods. If none are added all postal codes will be able to use that shipping rate
                        </div>
                      </div>
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="includePostalCodes"
                          type="radio"
                          value="INCLUDE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      <div
                        class="ShippingZonePostalCodes-option-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Include postal codes
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          Only added postal codes will be able to use this shipping rate
                        </div>
                      </div>
                    </span>
                  </label>
                </div>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <colgroup>
                  <col />
                  <col
                    class="ShippingZonePostalCodes-colAction-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        0 postal code ranges
                      </div>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id ShippingZonePostalCodes-arrow-id ShippingZonePostalCodes-arrowRotate-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <g
                            style="fill-rule:evenodd"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                          </g>
                        </svg>
                      </button>
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                      colspan="2"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        This shipping rate has no postal codes assigned
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Excluded Products
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign products
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id ShippingMethodProducts-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                      scope="col"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingMethodProducts-colProductName-id"
                      scope="col"
                    >
                      Product Name
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingMethodProducts-colAction-id"
                      scope="col"
                    >
                      Actions
                    </th>
                  </tr>
                </thead>
                <tfoot
                  class="MuiTableFooter-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id"
                      colspan="3"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                      >
                        <div
                          class="Pagination-spacer-id"
                        />
                        <div
                          class="Pagination-actions-id"
                        >
                          <button
                            aria-label="previous page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                              />
                            </svg>
                          </button>
                          <button
                            aria-label="next page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-next"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                              />
                            </svg>
                          </button>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tfoot>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ShippingMethodProducts-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail=""
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              clip-rule="evenodd"
                              d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
                              fill="currentColor"
                              fill-rule="evenodd"
                            />
                          </svg>
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body2-id"
                          >
                            Apple Juice
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingMethodProducts-colAction-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 2 out of 3 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Shipping / Shipping rate update weight rate 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            DB Schenker
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Shipping rate name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="DB Schenker"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Shipping rate name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                data-test-id="rich-text-editor-description"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
                  data-shrink="true"
                >
                  Shipping Rate Description
                </label>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                />
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="ShippingRateInfo-deliveryTimeFields-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Min Delivery Time
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      name="minDays"
                      type="number"
                      value="0"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Min Delivery Time
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Max Delivery Time
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      name="maxDays"
                      type="number"
                      value="10"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Max Delivery Time
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Order Weight
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="orderValueRestricted"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Restrict order weight
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    This rate will apply to all orders
                  </div>
                </span>
              </label>
              <div
                class="VerticalSpacer-container-id VerticalSpacer-container-id"
              />
              <div
                class="OrderWeight-grid-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Min. Order Weight
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      name="minValue"
                      type="number"
                      value="0"
                    />
                    <div
                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      />
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Min. Order Weight
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Max. Order Weight
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      name="maxValue"
                      type="number"
                      value="80"
                    />
                    <div
                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      />
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Max. Order Weight
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Pricing
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id PricingCard-pricingContent-id"
            >
              <div
                class="MuiTypography-root-id PricingCard-caption-id MuiTypography-caption-id"
              >
                Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
              </div>
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id PricingCard-table-id"
                >
                  <thead
                    class="MuiTableHead-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                    >
                      <th
                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colName-id"
                        scope="col"
                      >
                        <span>
                          Channel name
                        </span>
                      </th>
                      <th
                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colType-id"
                        scope="col"
                      >
                        <span>
                          Price
                        </span>
                      </th>
                    </tr>
                  </thead>
                  <tbody
                    class="MuiTableBody-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-hover-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          channel
                        </div>
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id"
                      >
                        <div
                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                        >
                          <label
                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id MuiFormLabel-required-id MuiInputLabel-required-id"
                            data-shrink="true"
                          >
                            Price
                            <span
                              aria-hidden="true"
                              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
                            >
                               *
                            </span>
                          </label>
                          <div
                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                          >
                            <input
                              aria-invalid="false"
                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                              min="0"
                              name="price"
                              required=""
                              step="0.01"
                              type="number"
                              value="5"
                            />
                            <div
                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                              >
                                USD
                              </div>
                            </div>
                            <fieldset
                              aria-hidden="true"
                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            >
                              <legend
                                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                              >
                                <span>
                                  Price *
                                </span>
                              </legend>
                            </fieldset>
                          </div>
                        </div>
                      </td>
                    </tr>
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-hover-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          test
                        </div>
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id"
                      >
                        <div
                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                        >
                          <label
                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id MuiFormLabel-required-id MuiInputLabel-required-id"
                            data-shrink="true"
                          >
                            Price
                            <span
                              aria-hidden="true"
                              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
                            >
                               *
                            </span>
                          </label>
                          <div
                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                          >
                            <input
                              aria-invalid="false"
                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                              min="0"
                              name="price"
                              required=""
                              step="0.01"
                              type="number"
                              value="6"
                            />
                            <div
                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                              >
                                USD
                              </div>
                            </div>
                            <fieldset
                              aria-hidden="true"
                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            >
                              <legend
                                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                              >
                                <span>
                                  Price *
                                </span>
                              </legend>
                            </fieldset>
                          </div>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Postal codes
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="add-postal-code-range"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Add postal code range
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id ShippingZonePostalCodes-radioContainer-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="includePostalCodes"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="includePostalCodes"
                          type="radio"
                          value="EXCLUDE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      <div
                        class="ShippingZonePostalCodes-option-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Exclude postal codes
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          Added postal codes will be excluded from using this delivery methods. If none are added all postal codes will be able to use that shipping rate
                        </div>
                      </div>
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="includePostalCodes"
                          type="radio"
                          value="INCLUDE"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      <div
                        class="ShippingZonePostalCodes-option-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Include postal codes
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          Only added postal codes will be able to use this shipping rate
                        </div>
                      </div>
                    </span>
                  </label>
                </div>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <colgroup>
                  <col />
                  <col
                    class="ShippingZonePostalCodes-colAction-id"
                  />
                </colgroup>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        0 postal code ranges
                      </div>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id ShippingZonePostalCodes-arrow-id ShippingZonePostalCodes-arrowRotate-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <g
                            style="fill-rule:evenodd"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                          </g>
                        </svg>
                      </button>
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                      colspan="2"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        This shipping rate has no postal codes assigned
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Excluded Products
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign products
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id ShippingMethodProducts-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                      scope="col"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingMethodProducts-colProductName-id"
                      scope="col"
                    >
                      Product Name
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingMethodProducts-colAction-id"
                      scope="col"
                    >
                      Actions
                    </th>
                  </tr>
                </thead>
                <tfoot
                  class="MuiTableFooter-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id"
                      colspan="3"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                      >
                        <div
                          class="Pagination-spacer-id"
                        />
                        <div
                          class="Pagination-actions-id"
                        >
                          <button
                            aria-label="previous page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                              />
                            </svg>
                          </button>
                          <button
                            aria-label="next page"
                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-next"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                              />
                            </svg>
                          </button>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tfoot>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            data-indeterminate="false"
                            type="checkbox"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <rect
                              fill="transparent"
                              height="22"
                              rx="2"
                              ry="2"
                              stroke="currentColor"
                              stroke-linejoin="round"
                              stroke-width="2"
                              width="22"
                              x="1"
                              y="1"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ShippingMethodProducts-colName-id"
                      data-test-id="table-cell-avatar"
                      thumbnail=""
                    >
                      <div
                        class="Avatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              clip-rule="evenodd"
                              d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
                              fill="currentColor"
                              fill-rule="evenodd"
                            />
                          </svg>
                        </div>
                        <div
                          class="Avatar-children-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body2-id"
                          >
                            Apple Juice
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingMethodProducts-colAction-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Availability
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              />
            </div>
            <div
              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
            >
              <div
                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
              >
                Available at 2 out of 3 channels
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    channel
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
              <div
                class="ChannelsAvailabilityCard-channelItem-id"
              >
                <div
                  class="ChannelsAvailabilityCard-channelName-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    test
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Europe
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Shipping zone name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    data-test-id="name"
                    name="name"
                    type="text"
                    value="Europe"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Shipping zone name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  <div
                    class="ShippingZoneCreatePage-labelContainer-id"
                  >
                    <div
                      class="ShippingZoneCreatePage-label-id"
                    >
                      Description (optional)
                    </div>
                    <span>
                      25 of 300 characters
                    </span>
                  </div>
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    maxlength="300"
                    name="description"
                    placeholder="Description of a shipping zone."
                    rows="10"
                  >
                    Shipping zone description
                  </textarea>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        <div
                          class="ShippingZoneCreatePage-labelContainer-id"
                        >
                          <div
                            class="ShippingZoneCreatePage-label-id"
                          >
                            Description (optional)
                          </div>
                          <span>
                            25 of 300 characters
                          </span>
                        </div>
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Countries
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="assign-country"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign countries
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id CountryList-pointer-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-wideColumn-id CountryList-toLeft-id"
                    >
                      51 Countries
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id CountryList-iconCell-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          data-test-id="countries-drop-down-icon"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Price Based Rates
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="add-price-rate"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create rate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                      scope="col"
                    >
                      Name
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-valueColumn-id"
                      scope="col"
                    >
                      Value Range
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-buttonColumn-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-buttonColumn-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
                    >
                      UPS
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      -
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                      data-test-id="shipping-rate-price"
                    >
                      -
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                          />
                        </svg>
                      </button>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
                    >
                      DHL
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      -
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                      data-test-id="shipping-rate-price"
                    >
                      -
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                          />
                        </svg>
                      </button>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Weight Based Rates
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="add-weight-rate"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create rate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                      scope="col"
                    >
                      Name
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-valueColumn-id"
                      scope="col"
                    >
                      Weight Range
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-buttonColumn-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-buttonColumn-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
                    >
                      DB Schenker
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      -
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                      data-test-id="shipping-rate-price"
                    >
                      -
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                          />
                        </svg>
                      </button>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
                    >
                      Registred priority
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      -
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                      data-test-id="shipping-rate-price"
                    >
                      -
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                          />
                        </svg>
                      </button>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Settings
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              Assign channels to this shipping zone so we know which orders will be supported
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-158-label"
                class="MultiAutocompleteSelectField-container-id"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Channel
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-158-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-158-menu"
                      placeholder="Add Channel"
                      role="listbox"
                      testid="channels"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Channel
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              >
                <div
                  class="MultiAutocompleteSelectField-chip-id"
                >
                  <div
                    class="MultiAutocompleteSelectField-chipInner-id"
                  >
                    <div
                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                    >
                      GBP
                    </div>
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="channels-remove"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
                <div
                  class="MultiAutocompleteSelectField-chip-id"
                >
                  <div
                    class="MultiAutocompleteSelectField-chipInner-id"
                  >
                    <div
                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                    >
                      PLN
                    </div>
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="channels-remove"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <hr
              class="MuiDivider-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              Select warehouse from which you will ship products for this shipping zone. This warehouse address will also be used to calculate taxes.
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-159-label"
                class="MultiAutocompleteSelectField-container-id"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Warehouse
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-159-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-159-menu"
                      placeholder="Select Warehouse"
                      role="listbox"
                      testid="warehouses"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Warehouse
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              >
                <div
                  class="MultiAutocompleteSelectField-chip-id"
                >
                  <div
                    class="MultiAutocompleteSelectField-chipInner-id"
                  >
                    <div
                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                    >
                      C our wares
                    </div>
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="warehouses-remove"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
                <div
                  class="MultiAutocompleteSelectField-chip-id"
                >
                  <div
                    class="MultiAutocompleteSelectField-chipInner-id"
                  >
                    <div
                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                    >
                      Be stocked
                    </div>
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="warehouses-remove"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Europe
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Shipping zone name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    data-test-id="name"
                    name="name"
                    type="text"
                    value="Europe"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Shipping zone name
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Invalid value
                </p>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  <div
                    class="ShippingZoneCreatePage-labelContainer-id"
                  >
                    <div
                      class="ShippingZoneCreatePage-label-id"
                    >
                      Description (optional)
                    </div>
                    <span>
                      25 of 300 characters
                    </span>
                  </div>
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    maxlength="300"
                    name="description"
                    placeholder="Description of a shipping zone."
                    rows="10"
                  >
                    Shipping zone description
                  </textarea>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        <div
                          class="ShippingZoneCreatePage-labelContainer-id"
                        >
                          <div
                            class="ShippingZoneCreatePage-label-id"
                          >
                            Description (optional)
                          </div>
                          <span>
                            25 of 300 characters
                          </span>
                        </div>
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Countries
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="assign-country"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign countries
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id CountryList-pointer-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-wideColumn-id CountryList-toLeft-id"
                    >
                      51 Countries
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id CountryList-iconCell-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          data-test-id="countries-drop-down-icon"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Price Based Rates
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="add-price-rate"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create rate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                      scope="col"
                    >
                      Name
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-valueColumn-id"
                      scope="col"
                    >
                      Value Range
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-buttonColumn-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-buttonColumn-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
                    >
                      UPS
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      -
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                      data-test-id="shipping-rate-price"
                    >
                      -
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                          />
                        </svg>
                      </button>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
                    >
                      DHL
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      -
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                      data-test-id="shipping-rate-price"
                    >
                      -
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                          />
                        </svg>
                      </button>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Weight Based Rates
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  data-test-id="add-weight-rate"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create rate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                      scope="col"
                    >
                      Name
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-valueColumn-id"
                      scope="col"
                    >
                      Weight Range
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-buttonColumn-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-buttonColumn-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
                    >
                      DB Schenker
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      -
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                      data-test-id="shipping-rate-price"
                    >
                      -
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                          />
                        </svg>
                      </button>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
                    >
                      Registred priority
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      -
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                      data-test-id="shipping-rate-price"
                    >
                      -
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                          />
                        </svg>
                      </button>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        color="primary"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                No metadata created for this element. Use the button below to add new metadata field.
              </div>
            </div>
            <div
              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test-id="add-field"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add Field
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Settings
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              Assign channels to this shipping zone so we know which orders will be supported
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-162-label"
                class="MultiAutocompleteSelectField-container-id"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Channel
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-162-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-162-menu"
                      placeholder="Add Channel"
                      role="listbox"
                      testid="channels"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Channel
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              >
                <div
                  class="MultiAutocompleteSelectField-chip-id"
                >
                  <div
                    class="MultiAutocompleteSelectField-chipInner-id"
                  >
                    <div
                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                    >
                      GBP
                    </div>
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="channels-remove"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
                <div
                  class="MultiAutocompleteSelectField-chip-id"
                >
                  <div
                    class="MultiAutocompleteSelectField-chipInner-id"
                  >
                    <div
                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                    >
                      PLN
                    </div>
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="channels-remove"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <hr
              class="MuiDivider-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              Select warehouse from which you will ship products for this shipping zone. This warehouse address will also be used to calculate taxes.
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-163-label"
                class="MultiAutocompleteSelectField-container-id"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Warehouse
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-163-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-163-menu"
                      placeholder="Select Warehouse"
                      role="listbox"
                      testid="warehouses"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Warehouse
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              >
                <div
                  class="MultiAutocompleteSelectField-chip-id"
                >
                  <div
                    class="MultiAutocompleteSelectField-chipInner-id"
                  >
                    <div
                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                    >
                      C our wares
                    </div>
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="warehouses-remove"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
                <div
                  class="MultiAutocompleteSelectField-chip-id"
                >
                  <div
                    class="MultiAutocompleteSelectField-chipInner-id"
                  >
                    <div
                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                    >
                      Be stocked
                    </div>
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="warehouses-remove"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
              style="width:10em"
            >
              ‌
            </span>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Shipping zone name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    data-test-id="name"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Shipping zone name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  <div
                    class="ShippingZoneCreatePage-labelContainer-id"
                  >
                    <div
                      class="ShippingZoneCreatePage-label-id"
                    >
                      Description (optional)
                    </div>
                  </div>
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    disabled=""
                    maxlength="300"
                    name="description"
                    placeholder="Description of a shipping zone."
                    rows="10"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        <div
                          class="ShippingZoneCreatePage-labelContainer-id"
                        >
                          <div
                            class="ShippingZoneCreatePage-label-id"
                          >
                            Description (optional)
                          </div>
                        </div>
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Countries
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  data-test-id="assign-country"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign countries
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id CountryList-pointer-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-wideColumn-id CountryList-toLeft-id"
                    >
                      ... Countries
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id CountryList-iconCell-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                        tabindex="0"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          data-test-id="countries-drop-down-icon"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Price Based Rates
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  data-test-id="add-price-rate"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create rate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                      scope="col"
                    >
                      Name
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-valueColumn-id"
                      scope="col"
                    >
                      Value Range
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-buttonColumn-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-buttonColumn-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                      data-test-id="shipping-rate-price"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
                        color="primary"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                          />
                        </svg>
                      </button>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
                        color="primary"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Weight Based Rates
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  data-test-id="add-weight-rate"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create rate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                      scope="col"
                    >
                      Name
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-valueColumn-id"
                      scope="col"
                    >
                      Weight Range
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-buttonColumn-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-buttonColumn-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                      data-test-id="shipping-rate-price"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
                        color="primary"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                          />
                        </svg>
                      </button>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
                    >
                      <button
                        class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
                        color="primary"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="false"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-expanded="true"
            data-test-id="metadata-editor"
            data-test-is-private="true"
          >
            <div
              class="MuiCardHeader-root-id Metadata-header-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Private Metadata
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
                    data-test-id="expand"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m8 10.5 4 4 4-4"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                      <circle
                        cx="12"
                        cy="12"
                        r="10.25"
                        stroke="currentColor"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Settings
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              Assign channels to this shipping zone so we know which orders will be supported
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-160-label"
                class="MultiAutocompleteSelectField-container-id"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Channel
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-160-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-160-menu"
                      placeholder="Add Channel"
                      role="listbox"
                      testid="channels"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Channel
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              />
            </div>
            <hr
              class="MuiDivider-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              Select warehouse from which you will ship products for this shipping zone. This warehouse address will also be used to calculate taxes.
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-161-label"
                class="MultiAutocompleteSelectField-container-id"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Warehouse
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-161-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-161-menu"
                      placeholder="Select Warehouse"
                      role="listbox"
                      testid="warehouses"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Warehouse
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Shipping / Shipping zones list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Shipping
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Shipping By Zone
              </span>
            </div>
            <div
              class="MuiCardHeader-action-id"
            >
              <a
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                data-test-id="add-shipping-zone"
                href="/shipping/add"
                role="button"
                tabindex="0"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Create shipping zone
                </span>
              </a>
            </div>
          </div>
          <div
            class="ResponsiveTable-root-id"
          >
            <a
              class="TableRowLink-link-id"
              href="/shipping/U2hpcHBpbmdab25lOjE%3D"
            />
            <a
              class="TableRowLink-link-id"
              href="/shipping/U2hpcHBpbmdab25lOjI%3D"
            />
            <a
              class="TableRowLink-link-id"
              href="/shipping/U2hpcHBpbmdab25lOjM%3D"
            />
            <a
              class="TableRowLink-link-id"
              href="/shipping/U2hpcHBpbmdab25lOjQ%3D"
            />
            <a
              class="TableRowLink-link-id"
              href="/shipping/U2hpcHBpbmdab25lOjU%3D"
            />
            <table
              class="MuiTable-root-id"
            >
              <colgroup>
                <col />
                <col
                  class="ShippingZonesList-colName-id"
                />
                <col
                  class="ShippingZonesList-colCountries-id"
                />
                <col
                  class="ShippingZonesList-colAction-id"
                />
              </colgroup>
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                    scope="col"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colName-id"
                    scope="col"
                  >
                    Name
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colCountries-id"
                    scope="col"
                  >
                    Countries
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colAction-id"
                    scope="col"
                  />
                </tr>
              </thead>
              <tfoot
                class="MuiTableFooter-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-footer-id"
                    colspan="4"
                  >
                    <div
                      class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                    >
                      <div
                        class="Pagination-spacer-id"
                      >
                        <div
                          class="Pagination-rowNumber-id"
                        >
                          <span
                            class="Pagination-rowNumberLabel-id"
                          >
                            No. of rows
                          </span>
                           20
                        </div>
                      </div>
                      <div
                        class="Pagination-actions-id"
                      >
                        <button
                          aria-label="previous page"
                          class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                          data-test="button-pagination-back"
                          disabled=""
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="next page"
                          class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                          data-test="button-pagination-next"
                          disabled=""
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                  </td>
                </tr>
              </tfoot>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      data-test-id="U2hpcHBpbmdab25lOjE=-checkbox"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                    data-test-id="U2hpcHBpbmdab25lOjE=-name"
                  >
                    Europe
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
                  >
                    51
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      color="primary"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      data-test-id="U2hpcHBpbmdab25lOjI=-checkbox"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                    data-test-id="U2hpcHBpbmdab25lOjI=-name"
                  >
                    Oceania
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
                  >
                    29
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      color="primary"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      data-test-id="U2hpcHBpbmdab25lOjM=-checkbox"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                    data-test-id="U2hpcHBpbmdab25lOjM=-name"
                  >
                    Asia
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
                  >
                    51
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      color="primary"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      data-test-id="U2hpcHBpbmdab25lOjQ=-checkbox"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                    data-test-id="U2hpcHBpbmdab25lOjQ=-name"
                  >
                    Americas
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
                  >
                    57
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      color="primary"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      data-test-id="U2hpcHBpbmdab25lOjU=-checkbox"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                    data-test-id="U2hpcHBpbmdab25lOjU=-name"
                  >
                    Africa
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
                  >
                    60
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      color="primary"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div />
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Shipping / Shipping zones list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Shipping
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Shipping By Zone
              </span>
            </div>
            <div
              class="MuiCardHeader-action-id"
            >
              <a
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                data-test-id="add-shipping-zone"
                href="/shipping/add"
                role="button"
                tabindex="0"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Create shipping zone
                </span>
              </a>
            </div>
          </div>
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <colgroup>
                <col />
                <col
                  class="ShippingZonesList-colName-id"
                />
                <col
                  class="ShippingZonesList-colCountries-id"
                />
                <col
                  class="ShippingZonesList-colAction-id"
                />
              </colgroup>
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                    scope="col"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          disabled=""
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colName-id"
                    scope="col"
                  >
                    Name
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colCountries-id"
                    scope="col"
                  >
                    Countries
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colAction-id"
                    scope="col"
                  />
                </tr>
              </thead>
              <tfoot
                class="MuiTableFooter-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-footer-id"
                    colspan="4"
                  >
                    <div
                      class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                    >
                      <div
                        class="Pagination-spacer-id"
                      >
                        <div
                          class="Pagination-rowNumber-id"
                        >
                          <span
                            class="Pagination-rowNumberLabel-id"
                          >
                            No. of rows
                          </span>
                           20
                        </div>
                      </div>
                      <div
                        class="Pagination-actions-id"
                      >
                        <button
                          aria-label="previous page"
                          class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                          data-test="button-pagination-back"
                          disabled=""
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="next page"
                          class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                          data-test="button-pagination-next"
                          disabled=""
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                  </td>
                </tr>
              </tfoot>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id ShippingZonesList-row-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          disabled=""
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                      data-test-id="skeleton"
                    >
                      ‌
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                      data-test-id="skeleton"
                    >
                      ‌
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
                      color="primary"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div />
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Shipping / Shipping zones list no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Shipping
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Shipping By Zone
              </span>
            </div>
            <div
              class="MuiCardHeader-action-id"
            >
              <a
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                data-test-id="add-shipping-zone"
                href="/shipping/add"
                role="button"
                tabindex="0"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Create shipping zone
                </span>
              </a>
            </div>
          </div>
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <colgroup>
                <col />
                <col
                  class="ShippingZonesList-colName-id"
                />
                <col
                  class="ShippingZonesList-colCountries-id"
                />
                <col
                  class="ShippingZonesList-colAction-id"
                />
              </colgroup>
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colName-id"
                    scope="col"
                  >
                    Name
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colCountries-id"
                    scope="col"
                  >
                    Countries
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colAction-id"
                    scope="col"
                  />
                </tr>
              </thead>
              <tfoot
                class="MuiTableFooter-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-footer-id"
                    colspan="4"
                  >
                    <div
                      class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                    >
                      <div
                        class="Pagination-spacer-id"
                      >
                        <div
                          class="Pagination-rowNumber-id"
                        >
                          <span
                            class="Pagination-rowNumberLabel-id"
                          >
                            No. of rows
                          </span>
                           20
                        </div>
                      </div>
                      <div
                        class="Pagination-actions-id"
                      >
                        <button
                          aria-label="previous page"
                          class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                          data-test="button-pagination-back"
                          disabled=""
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="next page"
                          class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                          data-test="button-pagination-next"
                          disabled=""
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                  </td>
                </tr>
              </tfoot>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                    colspan="4"
                  >
                    No shipping zones found
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div />
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Shipping / Shipping zones list no site settings permissions 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Shipping
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Shipping By Zone
              </span>
            </div>
            <div
              class="MuiCardHeader-action-id"
            >
              <a
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                data-test-id="add-shipping-zone"
                href="/shipping/add"
                role="button"
                tabindex="0"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Create shipping zone
                </span>
              </a>
            </div>
          </div>
          <div
            class="ResponsiveTable-root-id"
          >
            <a
              class="TableRowLink-link-id"
              href="/shipping/U2hpcHBpbmdab25lOjE%3D"
            />
            <a
              class="TableRowLink-link-id"
              href="/shipping/U2hpcHBpbmdab25lOjI%3D"
            />
            <a
              class="TableRowLink-link-id"
              href="/shipping/U2hpcHBpbmdab25lOjM%3D"
            />
            <a
              class="TableRowLink-link-id"
              href="/shipping/U2hpcHBpbmdab25lOjQ%3D"
            />
            <a
              class="TableRowLink-link-id"
              href="/shipping/U2hpcHBpbmdab25lOjU%3D"
            />
            <table
              class="MuiTable-root-id"
            >
              <colgroup>
                <col />
                <col
                  class="ShippingZonesList-colName-id"
                />
                <col
                  class="ShippingZonesList-colCountries-id"
                />
                <col
                  class="ShippingZonesList-colAction-id"
                />
              </colgroup>
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
                    scope="col"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colName-id"
                    scope="col"
                  >
                    Name
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colCountries-id"
                    scope="col"
                  >
                    Countries
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colAction-id"
                    scope="col"
                  />
                </tr>
              </thead>
              <tfoot
                class="MuiTableFooter-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-footer-id"
                    colspan="4"
                  >
                    <div
                      class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                    >
                      <div
                        class="Pagination-spacer-id"
                      >
                        <div
                          class="Pagination-rowNumber-id"
                        >
                          <span
                            class="Pagination-rowNumberLabel-id"
                          >
                            No. of rows
                          </span>
                           20
                        </div>
                      </div>
                      <div
                        class="Pagination-actions-id"
                      >
                        <button
                          aria-label="previous page"
                          class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                          data-test="button-pagination-back"
                          disabled=""
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="next page"
                          class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                          data-test="button-pagination-next"
                          disabled=""
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                  </td>
                </tr>
              </tfoot>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      data-test-id="U2hpcHBpbmdab25lOjE=-checkbox"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                    data-test-id="U2hpcHBpbmdab25lOjE=-name"
                  >
                    Europe
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
                  >
                    51
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      color="primary"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      data-test-id="U2hpcHBpbmdab25lOjI=-checkbox"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                    data-test-id="U2hpcHBpbmdab25lOjI=-name"
                  >
                    Oceania
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
                  >
                    29
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      color="primary"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      data-test-id="U2hpcHBpbmdab25lOjM=-checkbox"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                    data-test-id="U2hpcHBpbmdab25lOjM=-name"
                  >
                    Asia
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
                  >
                    51
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      color="primary"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      data-test-id="U2hpcHBpbmdab25lOjQ=-checkbox"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                    data-test-id="U2hpcHBpbmdab25lOjQ=-name"
                  >
                    Americas
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
                  >
                    57
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      color="primary"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                      data-test-id="U2hpcHBpbmdab25lOjU=-checkbox"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <rect
                            fill="transparent"
                            height="22"
                            rx="2"
                            ry="2"
                            stroke="currentColor"
                            stroke-linejoin="round"
                            stroke-width="2"
                            width="22"
                            x="1"
                            y="1"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                    data-test-id="U2hpcHBpbmdab25lOjU=-name"
                  >
                    Africa
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
                  >
                    60
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                      color="primary"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div />
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Site settings / Page default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id ExtendedPageHeader-underline-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            General Information
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="ExtendedPageHeader-underline-id"
      >
        <hr
          class="MuiDivider-root-id"
        />
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-h5-id"
          >
            Checkout Configuration
          </div>
          <div
            class="VerticalSpacer-container-id VerticalSpacer-container-id"
          />
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            You can set basic checkout rules that will be applied globally to all your channels
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Reserved stock
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Set up time amount that stock in checkout is reserved for the customer. You can set separate values for authenticated and anonymous customers.
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Stock reservation for authenticated user (in minutes)
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  autocomplete="none"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="reserveStockDurationAuthenticatedUser"
                  type="number"
                  value="10"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                  >
                    <span>
                      Stock reservation for authenticated user (in minutes)
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
              >
                Leaving this setting empty will mean that stock won’t be reserved
              </p>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Stock reservation for anonymous user (in minutes)
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  autocomplete="none"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="reserveStockDurationAnonymousUser"
                  type="number"
                  value="10"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                  >
                    <span>
                      Stock reservation for anonymous user (in minutes)
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
              >
                Leaving this setting empty will mean that stock won’t be reserved
              </p>
            </div>
          </div>
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Checkout limits
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Checkout line limit
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  autocomplete="none"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  min="0"
                  name="limitQuantityPerCheckout"
                  type="number"
                  value="50"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                  >
                    <span>
                      Checkout line limit
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
              >
                This number defines quantity of items in checkout line that can be bought. You can override this setting per variant. Leaving this setting empty mean that there is no limits.
              </p>
            </div>
          </div>
        </div>
        <hr
          class="Hr-root-id SiteSettingsPage-hr-id"
        />
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-h5-id"
          >
            Company Information
          </div>
          <div
            class="VerticalSpacer-container-id VerticalSpacer-container-id"
          />
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            This address will be used to generate invoices and calculate shipping rates. Email address you provide here will be used as a contact address for your customers.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id CompanyAddressInput-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Store Information
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="CompanyAddressForm-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Company
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="organization"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="companyName"
                    type="text"
                    value="Saleor e-commerce"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Company
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Address line 1
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="address-line1"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="streetAddress1"
                    type="text"
                    value="01419 Bernhard Plain"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Address line 1
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Address line 2
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="address-line2"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="streetAddress2"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Address line 2
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="Grid-root-id Grid-default-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    City
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="address-level2"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="city"
                      type="text"
                      value="Kenstad"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          City
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    ZIP / Postal code
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="postal-code"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="postalCode"
                      type="text"
                      value="89880-6342"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          ZIP / Postal code
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="Grid-root-id Grid-default-id"
              >
                <div
                  aria-expanded="false"
                  aria-haspopup="listbox"
                  aria-labelledby="downshift-164-label"
                  class="SingleAutocompleteSelectField-container-id"
                  data-test-id="address-edit-country-select-field"
                  role="combobox"
                >
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      Country
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <input
                        aria-autocomplete="list"
                        aria-invalid="false"
                        aria-labelledby="downshift-164-label"
                        autocomplete="off"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        id="downshift-164-input"
                        type="text"
                        value="UA"
                      />
                      <div
                        aria-haspopup="true"
                        aria-label="open menu"
                        class="SingleAutocompleteSelectField-adornment-id"
                        data-toggle="true"
                        role="button"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="m8 10 4 4 4-4"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </div>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            Country
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Country area
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="address-level1"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="countryArea"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Country area
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Phone
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="tel"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="phone"
                    type="text"
                    value="+41 876-373-9137"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Phone
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Site settings / Page form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id ExtendedPageHeader-underline-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            General Information
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="ExtendedPageHeader-underline-id"
      >
        <hr
          class="MuiDivider-root-id"
        />
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-h5-id"
          >
            Checkout Configuration
          </div>
          <div
            class="VerticalSpacer-container-id VerticalSpacer-container-id"
          />
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            You can set basic checkout rules that will be applied globally to all your channels
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Reserved stock
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Set up time amount that stock in checkout is reserved for the customer. You can set separate values for authenticated and anonymous customers.
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Stock reservation for authenticated user (in minutes)
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  autocomplete="none"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="reserveStockDurationAuthenticatedUser"
                  type="number"
                  value="10"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                  >
                    <span>
                      Stock reservation for authenticated user (in minutes)
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
              >
                Leaving this setting empty will mean that stock won’t be reserved
              </p>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Stock reservation for anonymous user (in minutes)
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  autocomplete="none"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="reserveStockDurationAnonymousUser"
                  type="number"
                  value="10"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                  >
                    <span>
                      Stock reservation for anonymous user (in minutes)
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
              >
                Leaving this setting empty will mean that stock won’t be reserved
              </p>
            </div>
          </div>
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Checkout limits
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Checkout line limit
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  autocomplete="none"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  min="0"
                  name="limitQuantityPerCheckout"
                  type="number"
                  value="50"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                  >
                    <span>
                      Checkout line limit
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
              >
                This number defines quantity of items in checkout line that can be bought. You can override this setting per variant. Leaving this setting empty mean that there is no limits.
              </p>
            </div>
          </div>
        </div>
        <hr
          class="Hr-root-id SiteSettingsPage-hr-id"
        />
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-h5-id"
          >
            Company Information
          </div>
          <div
            class="VerticalSpacer-container-id VerticalSpacer-container-id"
          />
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            This address will be used to generate invoices and calculate shipping rates. Email address you provide here will be used as a contact address for your customers.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id CompanyAddressInput-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Store Information
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="CompanyAddressForm-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Company
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="organization"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="companyName"
                    type="text"
                    value="Saleor e-commerce"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Company
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Address line 1
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="address-line1"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="streetAddress1"
                    type="text"
                    value="01419 Bernhard Plain"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Address line 1
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Address line 2
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="address-line2"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="streetAddress2"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Address line 2
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="Grid-root-id Grid-default-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    City
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="address-level2"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="city"
                      type="text"
                      value="Kenstad"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          City
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    ZIP / Postal code
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="postal-code"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="postalCode"
                      type="text"
                      value="89880-6342"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          ZIP / Postal code
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="Grid-root-id Grid-default-id"
              >
                <div
                  aria-expanded="false"
                  aria-haspopup="listbox"
                  aria-labelledby="downshift-166-label"
                  class="SingleAutocompleteSelectField-container-id"
                  data-test-id="address-edit-country-select-field"
                  role="combobox"
                >
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      Country
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <input
                        aria-autocomplete="list"
                        aria-invalid="false"
                        aria-labelledby="downshift-166-label"
                        autocomplete="off"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        id="downshift-166-input"
                        type="text"
                        value="UA"
                      />
                      <div
                        aria-haspopup="true"
                        aria-label="open menu"
                        class="SingleAutocompleteSelectField-adornment-id"
                        data-toggle="true"
                        role="button"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="m8 10 4 4 4-4"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </div>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            Country
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Country area
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="address-level1"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="countryArea"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Country area
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Phone
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="tel"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="phone"
                    type="text"
                    value="+41 876-373-9137"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Phone
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Site settings / Page loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id ExtendedPageHeader-underline-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            General Information
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="ExtendedPageHeader-underline-id"
      >
        <hr
          class="MuiDivider-root-id"
        />
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-h5-id"
          >
            Checkout Configuration
          </div>
          <div
            class="VerticalSpacer-container-id VerticalSpacer-container-id"
          />
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            You can set basic checkout rules that will be applied globally to all your channels
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Reserved stock
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Set up time amount that stock in checkout is reserved for the customer. You can set separate values for authenticated and anonymous customers.
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                data-shrink="false"
              >
                Stock reservation for authenticated user (in minutes)
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  autocomplete="none"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                  disabled=""
                  name="reserveStockDurationAuthenticatedUser"
                  type="number"
                  value=""
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id"
                  >
                    <span>
                      Stock reservation for authenticated user (in minutes)
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
              >
                Leaving this setting empty will mean that stock won’t be reserved
              </p>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                data-shrink="false"
              >
                Stock reservation for anonymous user (in minutes)
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  autocomplete="none"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                  disabled=""
                  name="reserveStockDurationAnonymousUser"
                  type="number"
                  value=""
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id"
                  >
                    <span>
                      Stock reservation for anonymous user (in minutes)
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
              >
                Leaving this setting empty will mean that stock won’t be reserved
              </p>
            </div>
          </div>
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Checkout limits
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                data-shrink="false"
              >
                Checkout line limit
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  autocomplete="none"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                  disabled=""
                  min="0"
                  name="limitQuantityPerCheckout"
                  type="number"
                  value=""
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id"
                  >
                    <span>
                      Checkout line limit
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
              >
                This number defines quantity of items in checkout line that can be bought. You can override this setting per variant. Leaving this setting empty mean that there is no limits.
              </p>
            </div>
          </div>
        </div>
        <hr
          class="Hr-root-id SiteSettingsPage-hr-id"
        />
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-h5-id"
          >
            Company Information
          </div>
          <div
            class="VerticalSpacer-container-id VerticalSpacer-container-id"
          />
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            This address will be used to generate invoices and calculate shipping rates. Email address you provide here will be used as a contact address for your customers.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id CompanyAddressInput-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="MuiCardHeader-root-id"
          >
            <div
              class="MuiCardHeader-content-id"
            >
              <span
                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
              >
                Store Information
              </span>
            </div>
          </div>
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="CompanyAddressForm-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Company
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="organization"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="companyName"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Company
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Address line 1
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="address-line1"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="streetAddress1"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Address line 1
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Address line 2
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="address-line2"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="streetAddress2"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Address line 2
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="Grid-root-id Grid-default-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    City
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="address-level2"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="city"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          City
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    ZIP / Postal code
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="postal-code"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="postalCode"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          ZIP / Postal code
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="Grid-root-id Grid-default-id"
              >
                <div
                  aria-expanded="false"
                  aria-haspopup="listbox"
                  aria-labelledby="downshift-165-label"
                  class="SingleAutocompleteSelectField-container-id"
                  data-test-id="address-edit-country-select-field"
                  role="combobox"
                >
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                      data-shrink="false"
                    >
                      Country
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <input
                        aria-autocomplete="list"
                        aria-invalid="false"
                        aria-labelledby="downshift-165-label"
                        autocomplete="off"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        disabled=""
                        id="downshift-165-input"
                        type="text"
                        value=""
                      />
                      <div
                        aria-haspopup="true"
                        aria-label="open menu"
                        class="SingleAutocompleteSelectField-adornment-id"
                        data-toggle="true"
                        role="button"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MacawIcon-root-id"
                          fill="none"
                          focusable="false"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="m8 10 4 4 4-4"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                          />
                        </svg>
                      </div>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            Country
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Country area
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="address-level1"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="countryArea"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Country area
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Phone
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="tel"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="phone"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Phone
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Staff / Staff member details default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Jacob Smith
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Staff Member Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="StaffProperties-root-id"
              >
                <div>
                  <div
                    class="StaffProperties-avatar-id"
                  >
                    <img
                      class="StaffProperties-avatarImage-id"
                      src="avatar1.png"
                    />
                  </div>
                </div>
                <div>
                  <div
                    class="StaffProperties-propGrid-id"
                  >
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                          data-shrink="true"
                        >
                          First Name
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="firstName"
                            type="text"
                            value="Jacob"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                            >
                              <span>
                                First Name
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                          data-shrink="true"
                        >
                          Last Name
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="lastName"
                            type="text"
                            value="Smith"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                            >
                              <span>
                                Last Name
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                          data-shrink="true"
                        >
                          Email address
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="email"
                            type="text"
                            value="admin@example.com"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                            >
                              <span>
                                Email address
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="StaffDetailsPage-noOverflow-id"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  User Status
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                If you want to disable this User please uncheck the box below.
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="isActive"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  User is active
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Permissions
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                User is assigned to:
              </div>
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-44-label"
                class="MultiAutocompleteSelectField-container-id"
                data-test-id="permission-groups"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Permission groups
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-44-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-44-menu"
                      role="listbox"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Permission groups
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              >
                <div
                  class="MultiAutocompleteSelectField-chip-id"
                >
                  <div
                    class="MultiAutocompleteSelectField-disabledChipInner-id"
                  >
                    <div
                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                    >
                      Full Access
                    </div>
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id MuiButtonBase-disabled-id"
                      data-test-id="remove"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
                <div
                  class="MultiAutocompleteSelectField-chip-id"
                >
                  <div
                    class="MultiAutocompleteSelectField-chipInner-id"
                  >
                    <div
                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                    >
                      Customer Support
                    </div>
                    <button
                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="remove"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Staff / Staff member details himself 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Jacob Smith
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Staff Member Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="StaffProperties-root-id"
              >
                <div>
                  <div
                    class="StaffProperties-avatar-id"
                  >
                    <img
                      class="StaffProperties-avatarImage-id"
                      src="avatar1.png"
                    />
                    <div
                      class="StaffProperties-avatarHover-id"
                    >
                      <div
                        class="MuiTypography-root-id StaffProperties-avatarActionText-id MuiTypography-body1-id"
                      >
                        Change
                      </div>
                      <div
                        class="MuiTypography-root-id StaffProperties-avatarActionText-id MuiTypography-body1-id"
                      >
                        Delete
                      </div>
                      <input
                        class="StaffProperties-fileField-id"
                        id="fileUpload"
                        type="file"
                      />
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="StaffProperties-propGrid-id"
                  >
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                          data-shrink="true"
                        >
                          First Name
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="firstName"
                            type="text"
                            value="Jacob"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                            >
                              <span>
                                First Name
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                          data-shrink="true"
                        >
                          Last Name
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="lastName"
                            type="text"
                            value="Smith"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                            >
                              <span>
                                Last Name
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                          data-shrink="true"
                        >
                          Email address
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="email"
                            type="text"
                            value="admin@example.com"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                            >
                              <span>
                                Email address
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Password
                </span>
              </div>
              <div
                class="MuiCardHeader-action-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Change your password
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                You should change your password every month to avoid security issues.
              </div>
            </div>
          </div>
        </div>
        <div
          class="StaffDetailsPage-noOverflow-id"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Preferences
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-46-label"
                class="SingleAutocompleteSelectField-container-id"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Preferred Language
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-46-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-46-input"
                      type="text"
                      value="English"
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="SingleAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Preferred Language
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                  >
                    Selecting this will change the language of your dashboard
                  </p>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Please note, while all currency and date adjustments are complete, language translations are at varying degrees of completion.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
              style="width:10em"
            >
              ‌
            </span>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Staff Member Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="StaffProperties-root-id"
              >
                <div>
                  <div
                    class="StaffProperties-avatar-id"
                  >
                    <div
                      class="StaffProperties-avatarDefault-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      />
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="StaffProperties-propGrid-id"
                  >
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          First Name
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="firstName"
                            type="text"
                            value=""
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                First Name
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Last Name
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="lastName"
                            type="text"
                            value=""
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Last Name
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Email address
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="email"
                            type="text"
                            value=""
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id"
                            >
                              <span>
                                Email address
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="StaffDetailsPage-noOverflow-id"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  User Status
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                If you want to disable this User please uncheck the box below.
              </div>
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      name="isActive"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  User is active
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Permissions
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                User is assigned to:
              </div>
              <div
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="downshift-45-label"
                class="MultiAutocompleteSelectField-container-id"
                data-test-id="permission-groups"
                role="combobox"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Permission groups
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-autocomplete="list"
                      aria-invalid="false"
                      aria-labelledby="downshift-45-label"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      id="downshift-45-menu"
                      role="listbox"
                      type="text"
                      value=""
                    />
                    <div
                      aria-haspopup="true"
                      aria-label="open menu"
                      class="MultiAutocompleteSelectField-adornment-id"
                      data-toggle="true"
                      role="button"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MacawIcon-root-id"
                        fill="none"
                        focusable="false"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m8 10 4 4 4-4"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                        />
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Permission groups
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Jacob Smith
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Staff Member Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="StaffProperties-root-id"
              >
                <div>
                  <div
                    class="StaffProperties-avatar-id"
                  >
                    <img
                      class="StaffProperties-avatarImage-id"
                      src="avatar1.png"
                    />
                  </div>
                </div>
                <div>
                  <div
                    class="StaffProperties-propGrid-id"
                  >
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                          data-shrink="true"
                        >
                          First Name
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="firstName"
                            type="text"
                            value="Jacob"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                            >
                              <span>
                                First Name
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                          data-shrink="true"
                        >
                          Last Name
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="lastName"
                            type="text"
                            value="Smith"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                            >
                              <span>
                                Last Name
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                          data-shrink="true"
                        >
                          Email address
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="email"
                            type="text"
                            value="admin@example.com"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          >
                            <legend
                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                            >
                              <span>
                                Email address
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="StaffDetailsPage-noOverflow-id"
        />
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Staff / Staff members default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Staff Members
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            7/10 members
          </div>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="invite-staff-member"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Invite staff member
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Staff Members
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Staff Member"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <table
          class="MuiTable-root-id"
        >
          <colgroup>
            <col />
            <col
              class="StaffList-colEmail-id"
            />
          </colgroup>
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id StaffList-wideColumn-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Email Address
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="2"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Chris Cooper
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Inactive
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Inactive
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Inactive
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Inactive
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Staff / Staff members limits reached 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Staff Members
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            10/10 members
          </div>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
            data-test-id="invite-staff-member"
            disabled=""
            tabindex="-1"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Invite staff member
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id LimitReachedAlert-root-id Alert-root-id Alert-warning-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      data-test="alert"
    >
      <div
        class="MuiCardContent-root-id"
      >
        <div
          class="Alert-container-id"
        >
          <div
            class="Alert-icon-id"
          >
            <svg
              class="Alert-warning-id"
              fill="none"
              height="40"
              viewBox="0 0 40 40"
              width="40"
              xmlns="http://www.w3.org/2000/svg"
            >
              <circle
                cx="20"
                cy="20"
                fill="var(--background-paper)"
                r="20"
              />
              <circle
                cx="20"
                cy="20"
                r="14"
                stroke="currentColor"
                stroke-width="4"
              />
              <path
                clip-rule="evenodd"
                d="M19.5 11C18.6716 11 18 11.6716 18 12.5V20.5C18 21.3284 18.6716 22 19.5 22H20.5C21.3284 22 22 21.3284 22 20.5V12.5C22 11.6716 21.3284 11 20.5 11H19.5ZM19.5 25C18.6716 25 18 25.6716 18 26.5V27.5C18 28.3284 18.6716 29 19.5 29H20.5C21.3284 29 22 28.3284 22 27.5V26.5C22 25.6716 21.3284 25 20.5 25H19.5Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
          </div>
          <div
            class="Alert-content-id"
          >
            <div
              class="Alert-titleBar-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-h5-id"
              >
                Staff Member limit reached
              </div>
              <button
                class="MuiButtonBase-root-id IconButton-secondary-id Alert-close-id"
                data-test="close"
                tabindex="0"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="25"
                  viewBox="0 0 24 25"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    clip-rule="evenodd"
                    d="M7.53 6.472a.75.75 0 1 0-1.06 1.06l4.47 4.47-4.47 4.47a.75.75 0 0 0 1.06 1.06l4.47-4.47 4.47 4.47a.75.75 0 1 0 1.06-1.06l-4.47-4.47 4.47-4.47a.75.75 0 0 0-1.06-1.06L12 10.942l-4.47-4.47Z"
                    fill="currentColor"
                    fill-rule="evenodd"
                  />
                </svg>
              </button>
            </div>
            You have reached your staff member limit, you will be no longer able to add staff members to your store. If you would like to up your limit, contact your administration staff about raising your limits.
          </div>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Staff Members
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Staff Member"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <table
          class="MuiTable-root-id"
        >
          <colgroup>
            <col />
            <col
              class="StaffList-colEmail-id"
            />
          </colgroup>
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id StaffList-wideColumn-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Email Address
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="2"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Chris Cooper
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Inactive
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Inactive
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Inactive
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Inactive
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Staff / Staff members no limits 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Staff Members
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="invite-staff-member"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Invite staff member
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Staff Members
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Staff Member"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/staff/VXNlcjoyMQ%3D%3D"
        />
        <table
          class="MuiTable-root-id"
        >
          <colgroup>
            <col />
            <col
              class="StaffList-colEmail-id"
            />
          </colgroup>
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id StaffList-wideColumn-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Email Address
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="2"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Chris Cooper
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Inactive
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Inactive
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Inactive
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Inactive
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Staff / Staff members when loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Staff Members
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            7/10 members
          </div>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="invite-staff-member"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Invite staff member
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Staff Members
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            data-test-id="show-filters-button"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Staff Member"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <colgroup>
            <col />
            <col
              class="StaffList-colEmail-id"
            />
          </colgroup>
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id StaffList-wideColumn-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Email Address
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="2"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <div
                    class="StaffList-avatarDefault-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    />
                  </div>
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                    data-test-id="skeleton"
                  >
                    ‌
                  </span>
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                    data-test-id="skeleton"
                  >
                    ‌
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Taxes / Country List default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Taxes
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Configuration
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id TaxConfiguration-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="includeTax"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  All products prices are entered with tax included
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="showGross"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <svg
                        fill="none"
                        height="24"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          fill="currentColor"
                          height="23"
                          rx="1.5"
                          width="23"
                          x="0.5"
                          y="0.5"
                        />
                        <path
                          clip-rule="evenodd"
                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
                          fill="var(--background-paper)"
                          fill-rule="evenodd"
                        />
                      </svg>
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Show gross prices to customers in the storefront
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      name="chargeTaxesOnShipping"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Charge taxes on shipping rates
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Fetch taxes
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="ResponsiveTable-root-id"
            >
              <a
                class="TableRowLink-link-id"
                href="/taxes/AT"
              />
              <a
                class="TableRowLink-link-id"
                href="/taxes/BE"
              />
              <a
                class="TableRowLink-link-id"
                href="/taxes/BG"
              />
              <a
                class="TableRowLink-link-id"
                href="/taxes/CY"
              />
              <a
                class="TableRowLink-link-id"
                href="/taxes/CZ"
              />
              <a
                class="TableRowLink-link-id"
                href="/taxes/DE"
              />
              <a
                class="TableRowLink-link-id"
                href="/taxes/DK"
              />
              <a
                class="TableRowLink-link-id"
                href="/taxes/EE"
              />
              <a
                class="TableRowLink-link-id"
                href="/taxes/ES"
              />
              <a
                class="TableRowLink-link-id"
                href="/taxes/FI"
              />
              <a
                class="TableRowLink-link-id"
                href="/taxes/FR"
              />
              <a
                class="TableRowLink-link-id"
                href="/taxes/GB"
              />
              <a
                class="TableRowLink-link-id"
                href="/taxes/GR"
              />
              <a
                class="TableRowLink-link-id"
                href="/taxes/HR"
              />
              <a
                class="TableRowLink-link-id"
                href="/taxes/HU"
              />
              <a
                class="TableRowLink-link-id"
                href="/taxes/IE"
              />
              <a
                class="TableRowLink-link-id"
                href="/taxes/IT"
              />
              <a
                class="TableRowLink-link-id"
                href="/taxes/LT"
              />
              <a
                class="TableRowLink-link-id"
                href="/taxes/LU"
              />
              <a
                class="TableRowLink-link-id"
                href="/taxes/LV"
              />
              <a
                class="TableRowLink-link-id"
                href="/taxes/MT"
              />
              <a
                class="TableRowLink-link-id"
                href="/taxes/NL"
              />
              <a
                class="TableRowLink-link-id"
                href="/taxes/PL"
              />
              <a
                class="TableRowLink-link-id"
                href="/taxes/PT"
              />
              <a
                class="TableRowLink-link-id"
                href="/taxes/RO"
              />
              <a
                class="TableRowLink-link-id"
                href="/taxes/SE"
              />
              <a
                class="TableRowLink-link-id"
                href="/taxes/SI"
              />
              <a
                class="TableRowLink-link-id"
                href="/taxes/SK"
              />
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Country Code
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Country Name
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CountryList-textRight-id"
                      scope="col"
                    >
                      Reduced Tax Rates
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      AT
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Austria
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      8
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      BE
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Belgia
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      10
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      BG
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Bułgaria
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      1
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      CY
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Cypr
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      11
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      CZ
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Czechy
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      11
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      DE
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Niemcy
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      8
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      DK
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Dania
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      0
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      EE
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Estonia
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      4
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      ES
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Hiszpania
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      8
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      FI
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Finlandia
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      10
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      FR
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Francja
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      13
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      GB
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Wielka Brytania
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      8
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      GR
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Grecja
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      9
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      HR
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Chorwacja
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      2
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      HU
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Węgry
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      5
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      IE
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Irlandia
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      10
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      IT
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Włochy
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      10
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      LT
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Litwa
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      3
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      LU
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Luksemburg
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      17
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      LV
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Łotwa
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      5
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      MT
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Malta
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      8
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      NL
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Holandia
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      9
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      PL
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Polska
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      10
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      PT
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Portugalia
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      8
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      RO
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Rumunia
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      9
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      SE
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Szwecja
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      2
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      SI
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Słowenia
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      9
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      SK
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Słowacja
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      6
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Taxes / Country List loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Taxes
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Configuration
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id TaxConfiguration-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      name="includeTax"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  All products prices are entered with tax included
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      name="showGross"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Show gross prices to customers in the storefront
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <span
                  aria-disabled="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  tabindex="-1"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      data-indeterminate="false"
                      disabled=""
                      name="chargeTaxesOnShipping"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="22"
                        rx="2"
                        ry="2"
                        stroke="currentColor"
                        stroke-linejoin="round"
                        stroke-width="2"
                        width="22"
                        x="1"
                        y="1"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Charge taxes on shipping rates
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                disabled=""
                tabindex="-1"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Fetch taxes
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Country Code
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Country Name
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CountryList-textRight-id"
                      scope="col"
                    >
                      Reduced Tax Rates
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                        data-test-id="skeleton"
                      >
                        ‌
                      </span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Taxes / Reduced Tax Categories default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Tax Rates in Austria
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id CountryTaxesPage-wideColumn-id"
                    scope="col"
                  >
                    Category
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id"
                    scope="col"
                  >
                    Tax Rate
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    ADMISSION_TO_CULTURAL_EVENTS
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    10
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    ADMISSION_TO_ENTERTAINMENT_EVENTS
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    10
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    BOOKS
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    10
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    FOODSTUFFS
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    10
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    HOTELS
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    10
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    NEWSPAPERS
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    10
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    PASSENGER_TRANSPORT
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    10
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    PHARMACEUTICALS
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    10
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Taxes / Reduced Tax Categories loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          <span
            class="Skeleton-skeleton-id"
            data-test-id="skeleton"
            style="width:10em"
          >
            ‌
          </span>
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id CountryTaxesPage-wideColumn-id"
                    scope="col"
                  >
                    Category
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id"
                    scope="col"
                  >
                    Tax Rate
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                      data-test-id="skeleton"
                    >
                      ‌
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                      data-test-id="skeleton"
                    >
                      ‌
                    </span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Translations / Entity list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Translations to English
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Categories
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Collections
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                Products
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Sales
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Vouchers
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Pages
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Attributes
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Shipping methods
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TranslationsEntitiesList-wideColumn-id"
                scope="col"
              >
                Name
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TranslationsEntitiesList-textRight-id"
                scope="col"
              >
                Completed Translations
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="2"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  />
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id TranslationsEntitiesList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                White Hoodie
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TranslationsEntitiesList-textRight-id"
              >
                1 of 3
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id TranslationsEntitiesList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                Brown Supreme Hoodie
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TranslationsEntitiesList-textRight-id"
              >
                2 of 3
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Translations / Language list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Languages
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="ResponsiveTable-root-id"
      >
        <a
          class="TableRowLink-link-id"
          href="/translations/DE"
        />
        <a
          class="TableRowLink-link-id"
          href="/translations/EN"
        />
        <a
          class="TableRowLink-link-id"
          href="/translations/ES"
        />
        <a
          class="TableRowLink-link-id"
          href="/translations/PL"
        />
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id"
                scope="col"
              >
                Language
              </th>
            </tr>
          </thead>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id TranslationsLanguageList-link-id MuiTableRow-hover-id"
              data-test-id="DE"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TranslationsLanguageList-capitalize-id"
              >
                niemiecki
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id TranslationsLanguageList-link-id MuiTableRow-hover-id"
              data-test-id="EN"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TranslationsLanguageList-capitalize-id"
              >
                angielski
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id TranslationsLanguageList-link-id MuiTableRow-hover-id"
              data-test-id="ES"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TranslationsLanguageList-capitalize-id"
              >
                hiszpański
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id TranslationsLanguageList-link-id MuiTableRow-hover-id"
              data-test-id="PL"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TranslationsLanguageList-capitalize-id"
              >
                polski
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Translations / Language list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Languages
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id"
                scope="col"
              >
                Language
              </th>
            </tr>
          </thead>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id"
              data-test-id="skeleton"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TranslationsLanguageList-capitalize-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Translations / Language list no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Languages
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id"
                scope="col"
              >
                Language
              </th>
            </tr>
          </thead>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
                colspan="1"
              >
                No languages found
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Warehouses / Create warehouse default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Create Warehouse
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="general-information-section"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Warehouse Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="none"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Warehouse Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id CompanyAddressInput-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Address Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="CompanyAddressForm-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Company
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="organization"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="companyName"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Company
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Address line 1
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="address-line1"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="streetAddress1"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Address line 1
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Address line 2
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="address-line2"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="streetAddress2"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Address line 2
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <div
                  class="Grid-root-id Grid-default-id"
                >
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      City
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        autocomplete="address-level2"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="city"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            City
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      ZIP / Postal code
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        autocomplete="postal-code"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="postalCode"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            ZIP / Postal code
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <div
                  class="Grid-root-id Grid-default-id"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-47-label"
                    class="SingleAutocompleteSelectField-container-id"
                    data-test-id="address-edit-country-select-field"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Country
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-47-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-47-input"
                          type="text"
                          value=""
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="SingleAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Country
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      Country area
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        autocomplete="address-level1"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="countryArea"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            Country area
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Phone
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="tel"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="phone"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Phone
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Warehouses / Create warehouse form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Create Warehouse
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="general-information-section"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                  data-shrink="false"
                >
                  Warehouse Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    autocomplete="none"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Warehouse Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Invalid value
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id CompanyAddressInput-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Address Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="CompanyAddressForm-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                    data-shrink="false"
                  >
                    Company
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      autocomplete="organization"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="companyName"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Company
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Invalid value
                  </p>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                    data-shrink="false"
                  >
                    Address line 1
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      autocomplete="address-line1"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="streetAddress1"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Address line 1
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Invalid value
                  </p>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                    data-shrink="false"
                  >
                    Address line 2
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      autocomplete="address-line2"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="streetAddress2"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Address line 2
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Invalid value
                  </p>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <div
                  class="Grid-root-id Grid-default-id"
                >
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                      data-shrink="false"
                    >
                      City
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="true"
                        autocomplete="address-level2"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="city"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            City
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                    >
                      Invalid value
                    </p>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                      data-shrink="false"
                    >
                      ZIP / Postal code
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="true"
                        autocomplete="postal-code"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="postalCode"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            ZIP / Postal code
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                    >
                      Invalid value
                    </p>
                  </div>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <div
                  class="Grid-root-id Grid-default-id"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-49-label"
                    class="SingleAutocompleteSelectField-container-id"
                    data-test-id="address-edit-country-select-field"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                        data-shrink="false"
                      >
                        Country
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="true"
                          aria-labelledby="downshift-49-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-49-input"
                          type="text"
                          value=""
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="SingleAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Country
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                      <p
                        class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                      >
                        Invalid value
                      </p>
                    </div>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                      data-shrink="false"
                    >
                      Country area
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="true"
                        autocomplete="address-level1"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="countryArea"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            Country area
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                    >
                      Invalid value
                    </p>
                  </div>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                    data-shrink="false"
                  >
                    Phone
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      autocomplete="tel"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="phone"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Phone
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Invalid value
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Warehouses / Create warehouse loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            Create Warehouse
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="general-information-section"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Warehouse Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="none"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Warehouse Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id CompanyAddressInput-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Address Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="CompanyAddressForm-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Company
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="organization"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="companyName"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Company
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Address line 1
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="address-line1"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="streetAddress1"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Address line 1
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Address line 2
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="address-line2"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="streetAddress2"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Address line 2
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <div
                  class="Grid-root-id Grid-default-id"
                >
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                      data-shrink="false"
                    >
                      City
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        autocomplete="address-level2"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="city"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            City
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                      data-shrink="false"
                    >
                      ZIP / Postal code
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        autocomplete="postal-code"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="postalCode"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            ZIP / Postal code
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <div
                  class="Grid-root-id Grid-default-id"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-48-label"
                    class="SingleAutocompleteSelectField-container-id"
                    data-test-id="address-edit-country-select-field"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                        data-shrink="false"
                      >
                        Country
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-48-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          disabled=""
                          id="downshift-48-input"
                          type="text"
                          value=""
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="SingleAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Country
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                      data-shrink="false"
                    >
                      Country area
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        autocomplete="address-level1"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="countryArea"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            Country area
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Phone
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="tel"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="phone"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Phone
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Warehouses / Warehouse details default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            C our wares
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="general-information-section"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Warehouse Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="none"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="C our wares"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Warehouse Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id CompanyAddressInput-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Address Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="CompanyAddressForm-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Company
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="organization"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="companyName"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Company
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Address line 1
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="address-line1"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="streetAddress1"
                      type="text"
                      value="419 Ruiz Orchard Apt. 199"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Address line 1
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Address line 2
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="address-line2"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="streetAddress2"
                      type="text"
                      value="0238 Cremin Freeway"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Address line 2
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <div
                  class="Grid-root-id Grid-default-id"
                >
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                      data-shrink="true"
                    >
                      City
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        autocomplete="address-level2"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="city"
                        type="text"
                        value="Port Danielshire"
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                        >
                          <span>
                            City
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                      data-shrink="true"
                    >
                      ZIP / Postal code
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        autocomplete="postal-code"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="postalCode"
                        type="text"
                        value="52203"
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                        >
                          <span>
                            ZIP / Postal code
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <div
                  class="Grid-root-id Grid-default-id"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-50-label"
                    class="SingleAutocompleteSelectField-container-id"
                    data-test-id="address-edit-country-select-field"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Country
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-50-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-50-input"
                          type="text"
                          value="Szwecja"
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="SingleAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Country
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      Country area
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        autocomplete="address-level1"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="countryArea"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            Country area
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Phone
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="tel"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="phone"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Phone
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Settings
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="WarehouseInfoProps-link-id"
              >
                <a
                  class="Link-root-id Link-primary-id Link-underline-id"
                  href="/shipping/U2hpcHBpbmdab25lOjE%3D"
                >
                  Europe
                </a>
              </div>
              <div
                class="WarehouseInfoProps-link-id"
              >
                <a
                  class="Link-root-id Link-primary-id Link-underline-id"
                  href="/shipping/U2hpcHBpbmdab25lOjI%3D"
                >
                  Oceania
                </a>
              </div>
              <div
                class="WarehouseInfoProps-link-id"
              >
                <a
                  class="Link-root-id Link-primary-id Link-underline-id"
                  href="/shipping/U2hpcHBpbmdab25lOjM%3D"
                >
                  Asia
                </a>
              </div>
              <div
                class="WarehouseInfoProps-link-id"
              >
                <a
                  class="Link-root-id Link-primary-id Link-underline-id"
                  href="/shipping/U2hpcHBpbmdab25lOjQ%3D"
                >
                  Americas
                </a>
              </div>
              <div
                class="WarehouseInfoProps-link-id"
              >
                <a
                  class="Link-root-id Link-primary-id Link-underline-id"
                  href="/shipping/U2hpcHBpbmdab25lOjU%3D"
                >
                  Africa
                </a>
              </div>
            </div>
            <hr
              class="MuiDivider-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="isPrivate"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="isPrivate"
                          type="radio"
                          value="true"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Private Stock
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                      >
                        If enabled stock in this warehouse won't be shown
                      </div>
                      <div
                        class="FormSpacer-spacer-id"
                      />
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="isPrivate"
                          type="radio"
                          value="false"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Public Stock
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                      >
                        If enabled stock in this warehouse will be shown
                      </div>
                    </span>
                  </label>
                </div>
              </div>
            </div>
            <hr
              class="MuiDivider-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-h6-id MuiTypography-colorTextSecondary-id"
              >
                Pickup
                <div
                  class="MuiChip-root-id WarehouseInfoProps-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                  >
                    Preview
                  </span>
                </div>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="clickAndCollectOption"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="clickAndCollectOption"
                          type="radio"
                          value="DISABLED"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Disabled
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                      >
                        If selected customer won't be able to choose this warehouse as pickup point
                      </div>
                      <div
                        class="FormSpacer-spacer-id"
                      />
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="clickAndCollectOption"
                          type="radio"
                          value="ALL"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      All warehouses
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                      >
                        If selected customer will be able to choose this warehouse as pickup point. Ordered products can be shipped here from a different warehouse
                      </div>
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Warehouses / Warehouse details form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            C our wares
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="general-information-section"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Warehouse Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    autocomplete="none"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="C our wares"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                    >
                      <span>
                        Warehouse Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Invalid value
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id CompanyAddressInput-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Address Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="CompanyAddressForm-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                    data-shrink="false"
                  >
                    Company
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      autocomplete="organization"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="companyName"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Company
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Invalid value
                  </p>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Address line 1
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      autocomplete="address-line1"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="streetAddress1"
                      type="text"
                      value="419 Ruiz Orchard Apt. 199"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Address line 1
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                  >
                    Invalid value
                  </p>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Address line 2
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      autocomplete="address-line2"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="streetAddress2"
                      type="text"
                      value="0238 Cremin Freeway"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Address line 2
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                  >
                    Invalid value
                  </p>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <div
                  class="Grid-root-id Grid-default-id"
                >
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                      data-shrink="true"
                    >
                      City
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="true"
                        autocomplete="address-level2"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="city"
                        type="text"
                        value="Port Danielshire"
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                        >
                          <span>
                            City
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                    >
                      Invalid value
                    </p>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                      data-shrink="true"
                    >
                      ZIP / Postal code
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="true"
                        autocomplete="postal-code"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="postalCode"
                        type="text"
                        value="52203"
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                        >
                          <span>
                            ZIP / Postal code
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                    >
                      Invalid value
                    </p>
                  </div>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <div
                  class="Grid-root-id Grid-default-id"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-52-label"
                    class="SingleAutocompleteSelectField-container-id"
                    data-test-id="address-edit-country-select-field"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                        data-shrink="false"
                      >
                        Country
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="true"
                          aria-labelledby="downshift-52-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          id="downshift-52-input"
                          type="text"
                          value="Szwecja"
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="SingleAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Country
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                      <p
                        class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                      >
                        Invalid value
                      </p>
                    </div>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                      data-shrink="false"
                    >
                      Country area
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="true"
                        autocomplete="address-level1"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="countryArea"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            Country area
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                    >
                      Invalid value
                    </p>
                  </div>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                    data-shrink="false"
                  >
                    Phone
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      autocomplete="tel"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="phone"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Phone
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Invalid value
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Settings
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="WarehouseInfoProps-link-id"
              >
                <a
                  class="Link-root-id Link-primary-id Link-underline-id"
                  href="/shipping/U2hpcHBpbmdab25lOjE%3D"
                >
                  Europe
                </a>
              </div>
              <div
                class="WarehouseInfoProps-link-id"
              >
                <a
                  class="Link-root-id Link-primary-id Link-underline-id"
                  href="/shipping/U2hpcHBpbmdab25lOjI%3D"
                >
                  Oceania
                </a>
              </div>
              <div
                class="WarehouseInfoProps-link-id"
              >
                <a
                  class="Link-root-id Link-primary-id Link-underline-id"
                  href="/shipping/U2hpcHBpbmdab25lOjM%3D"
                >
                  Asia
                </a>
              </div>
              <div
                class="WarehouseInfoProps-link-id"
              >
                <a
                  class="Link-root-id Link-primary-id Link-underline-id"
                  href="/shipping/U2hpcHBpbmdab25lOjQ%3D"
                >
                  Americas
                </a>
              </div>
              <div
                class="WarehouseInfoProps-link-id"
              >
                <a
                  class="Link-root-id Link-primary-id Link-underline-id"
                  href="/shipping/U2hpcHBpbmdab25lOjU%3D"
                >
                  Africa
                </a>
              </div>
            </div>
            <hr
              class="MuiDivider-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="isPrivate"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="isPrivate"
                          type="radio"
                          value="true"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Private Stock
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                      >
                        If enabled stock in this warehouse won't be shown
                      </div>
                      <div
                        class="FormSpacer-spacer-id"
                      />
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="isPrivate"
                          type="radio"
                          value="false"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Public Stock
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                      >
                        If enabled stock in this warehouse will be shown
                      </div>
                    </span>
                  </label>
                </div>
              </div>
            </div>
            <hr
              class="MuiDivider-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-h6-id MuiTypography-colorTextSecondary-id"
              >
                Pickup
                <div
                  class="MuiChip-root-id WarehouseInfoProps-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                  >
                    Preview
                  </span>
                </div>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="clickAndCollectOption"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="clickAndCollectOption"
                          type="radio"
                          value="DISABLED"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      Disabled
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                      >
                        If selected customer won't be able to choose this warehouse as pickup point
                      </div>
                      <div
                        class="FormSpacer-spacer-id"
                      />
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="clickAndCollectOption"
                          type="radio"
                          value="ALL"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
                    >
                      All warehouses
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                      >
                        If selected customer will be able to choose this warehouse as pickup point. Ordered products can be shipped here from a different warehouse
                      </div>
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Warehouses / Warehouse details loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
        data-test-id="page-header"
      >
        <div
          class="ExtendedPageHeader-titleRow-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
          >
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
              style="width:10em"
            >
              ‌
            </span>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
            data-test-id="general-information-section"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  General Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Warehouse Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="none"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Warehouse Name
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id CompanyAddressInput-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Address Information
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="CompanyAddressForm-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Company
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="organization"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="companyName"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Company
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Address line 1
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="address-line1"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="streetAddress1"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Address line 1
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Address line 2
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="address-line2"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="streetAddress2"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Address line 2
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <div
                  class="Grid-root-id Grid-default-id"
                >
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                      data-shrink="false"
                    >
                      City
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        autocomplete="address-level2"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="city"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            City
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                      data-shrink="false"
                    >
                      ZIP / Postal code
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        autocomplete="postal-code"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="postalCode"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            ZIP / Postal code
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <div
                  class="Grid-root-id Grid-default-id"
                >
                  <div
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-labelledby="downshift-51-label"
                    class="SingleAutocompleteSelectField-container-id"
                    data-test-id="address-edit-country-select-field"
                    role="combobox"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                        data-shrink="false"
                      >
                        Country
                      </label>
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      >
                        <input
                          aria-autocomplete="list"
                          aria-invalid="false"
                          aria-labelledby="downshift-51-label"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          disabled=""
                          id="downshift-51-input"
                          type="text"
                          value=""
                        />
                        <div
                          aria-haspopup="true"
                          aria-label="open menu"
                          class="SingleAutocompleteSelectField-adornment-id"
                          data-toggle="true"
                          role="button"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MacawIcon-root-id"
                            fill="none"
                            focusable="false"
                            height="24"
                            viewBox="0 0 24 24"
                            width="24"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="m8 10 4 4 4-4"
                              stroke="currentColor"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="1.5"
                            />
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id"
                          >
                            <span>
                              Country
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                      data-shrink="false"
                    >
                      Country area
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        autocomplete="address-level1"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="countryArea"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id"
                        >
                          <span>
                            Country area
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Phone
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="tel"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="phone"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Phone
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardHeader-root-id"
            >
              <div
                class="MuiCardHeader-content-id"
              >
                <span
                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
                >
                  Settings
                </span>
              </div>
            </div>
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
            <hr
              class="MuiDivider-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="isPrivate"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="isPrivate"
                          type="radio"
                          value="true"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      Private Stock
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                      >
                        If enabled stock in this warehouse won't be shown
                      </div>
                      <div
                        class="FormSpacer-spacer-id"
                      />
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="isPrivate"
                          type="radio"
                          value="false"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      Public Stock
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                      >
                        If enabled stock in this warehouse will be shown
                      </div>
                    </span>
                  </label>
                </div>
              </div>
            </div>
            <hr
              class="MuiDivider-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-h6-id MuiTypography-colorTextSecondary-id"
              >
                Pickup
                <div
                  class="MuiChip-root-id WarehouseInfoProps-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
                >
                  <span
                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
                  >
                    Preview
                  </span>
                </div>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="clickAndCollectOption"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="clickAndCollectOption"
                          type="radio"
                          value="DISABLED"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="currentColor"
                            r="12"
                          />
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="5"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      Disabled
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                      >
                        If selected customer won't be able to choose this warehouse as pickup point
                      </div>
                      <div
                        class="FormSpacer-spacer-id"
                      />
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="clickAndCollectOption"
                          type="radio"
                          value="LOCAL"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      Local stock only
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                      >
                        If selected customer will be able to choose this warehouse as pickup point. Ordered products will be only fulfilled from this warehouse stock
                      </div>
                      <div
                        class="FormSpacer-spacer-id"
                      />
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="clickAndCollectOption"
                          type="radio"
                          value="ALL"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            cx="12"
                            cy="12"
                            fill="var(--background-paper)"
                            r="11"
                            stroke="currentColor"
                            stroke-width="2"
                          />
                        </svg>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      All warehouses
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                      >
                        If selected customer will be able to choose this warehouse as pickup point. Ordered products can be shipped here from a different warehouse
                      </div>
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Warehouses / Warehouse list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Warehouses
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            1/3 warehouses used
          </div>
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-warehouse"
            href="/warehouses/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Warehouse
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Warehouses
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="SearchBar-root-id"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Warehouse"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <a
          class="TableRowLink-link-id"
          href="/warehouses/V2FyZWhvdXNlOmEzMThmMGZlLTcwMmYtNDNjYy1hYmFjLWZmZmMzN2Y3ZTliYw%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/warehouses/V2FyZWhvdXNlOjJmN2UyOTlmLWEwMzMtNDhjZS1iYmM5LTFkZDM4NjU2ZjMwYw%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/warehouses/V2FyZWhvdXNlOmM0ZmQ3Nzc0LWZlMjYtNDE1YS1hYjk1LWFlYTFjMjI0NTgwNg%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/warehouses/V2FyZWhvdXNlOmNlMmNiZDhhLWRkYmQtNDhiNS1hM2UxLTNmZGVkZGI5MWZkMg%3D%3D"
        />
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id WarehouseList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id WarehouseList-colZones-id"
                scope="col"
              >
                Shipping Zones
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id WarehouseList-colActions-id"
                scope="col"
              >
                Actions
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="3"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
              data-test-id="warehouse-entry-cour wares"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
                data-test-id="name"
              >
                C our wares
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
                data-test-id="zones"
              >
                Europe, Oceania, Asia, Americas, Africa
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colActions-id"
              >
                <div
                  class="WarehouseList-actions-id"
                >
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                    color="primary"
                    data-test-id="edit-button"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                      />
                    </svg>
                  </button>
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                    color="primary"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
              data-test-id="warehouse-entry-bestocked"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
                data-test-id="name"
              >
                Be stocked
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
                data-test-id="zones"
              >
                Europe, Oceania, Asia, Americas, Africa
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colActions-id"
              >
                <div
                  class="WarehouseList-actions-id"
                >
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                    color="primary"
                    data-test-id="edit-button"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                      />
                    </svg>
                  </button>
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                    color="primary"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
              data-test-id="warehouse-entry-awarehouse"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
                data-test-id="name"
              >
                A Warehouse
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
                data-test-id="zones"
              >
                Europe, Oceania, Asia, Americas, Africa
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colActions-id"
              >
                <div
                  class="WarehouseList-actions-id"
                >
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                    color="primary"
                    data-test-id="edit-button"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                      />
                    </svg>
                  </button>
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                    color="primary"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
              data-test-id="warehouse-entry-darkwares"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
                data-test-id="name"
              >
                Darkwares
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
                data-test-id="zones"
              >
                Europe, Oceania, Asia, Americas, Africa
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colActions-id"
              >
                <div
                  class="WarehouseList-actions-id"
                >
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                    color="primary"
                    data-test-id="edit-button"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                      />
                    </svg>
                  </button>
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                    color="primary"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Warehouses / Warehouse list limits reached 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Warehouses
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            3/3 warehouses used
          </div>
          <a
            aria-disabled="true"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
            data-test-id="create-warehouse"
            href="/warehouses/add"
            role="button"
            tabindex="-1"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Warehouse
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id LimitReachedAlert-root-id Alert-root-id Alert-warning-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      data-test="alert"
    >
      <div
        class="MuiCardContent-root-id"
      >
        <div
          class="Alert-container-id"
        >
          <div
            class="Alert-icon-id"
          >
            <svg
              class="Alert-warning-id"
              fill="none"
              height="40"
              viewBox="0 0 40 40"
              width="40"
              xmlns="http://www.w3.org/2000/svg"
            >
              <circle
                cx="20"
                cy="20"
                fill="var(--background-paper)"
                r="20"
              />
              <circle
                cx="20"
                cy="20"
                r="14"
                stroke="currentColor"
                stroke-width="4"
              />
              <path
                clip-rule="evenodd"
                d="M19.5 11C18.6716 11 18 11.6716 18 12.5V20.5C18 21.3284 18.6716 22 19.5 22H20.5C21.3284 22 22 21.3284 22 20.5V12.5C22 11.6716 21.3284 11 20.5 11H19.5ZM19.5 25C18.6716 25 18 25.6716 18 26.5V27.5C18 28.3284 18.6716 29 19.5 29H20.5C21.3284 29 22 28.3284 22 27.5V26.5C22 25.6716 21.3284 25 20.5 25H19.5Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
            </svg>
          </div>
          <div
            class="Alert-content-id"
          >
            <div
              class="Alert-titleBar-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-h5-id"
              >
                Warehouse limit reached
              </div>
              <button
                class="MuiButtonBase-root-id IconButton-secondary-id Alert-close-id"
                data-test="close"
                tabindex="0"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MacawIcon-root-id"
                  fill="none"
                  focusable="false"
                  height="25"
                  viewBox="0 0 24 25"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    clip-rule="evenodd"
                    d="M7.53 6.472a.75.75 0 1 0-1.06 1.06l4.47 4.47-4.47 4.47a.75.75 0 0 0 1.06 1.06l4.47-4.47 4.47 4.47a.75.75 0 1 0 1.06-1.06l-4.47-4.47 4.47-4.47a.75.75 0 0 0-1.06-1.06L12 10.942l-4.47-4.47Z"
                    fill="currentColor"
                    fill-rule="evenodd"
                  />
                </svg>
              </button>
            </div>
            You have reached your warehouse limit, you will be no longer able to add warehouses to your store. If you would like to up your limit, contact your administration staff about raising your limits.
          </div>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Warehouses
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="SearchBar-root-id"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Warehouse"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <a
          class="TableRowLink-link-id"
          href="/warehouses/V2FyZWhvdXNlOmEzMThmMGZlLTcwMmYtNDNjYy1hYmFjLWZmZmMzN2Y3ZTliYw%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/warehouses/V2FyZWhvdXNlOjJmN2UyOTlmLWEwMzMtNDhjZS1iYmM5LTFkZDM4NjU2ZjMwYw%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/warehouses/V2FyZWhvdXNlOmM0ZmQ3Nzc0LWZlMjYtNDE1YS1hYjk1LWFlYTFjMjI0NTgwNg%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/warehouses/V2FyZWhvdXNlOmNlMmNiZDhhLWRkYmQtNDhiNS1hM2UxLTNmZGVkZGI5MWZkMg%3D%3D"
        />
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id WarehouseList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id WarehouseList-colZones-id"
                scope="col"
              >
                Shipping Zones
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id WarehouseList-colActions-id"
                scope="col"
              >
                Actions
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="3"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
              data-test-id="warehouse-entry-cour wares"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
                data-test-id="name"
              >
                C our wares
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
                data-test-id="zones"
              >
                Europe, Oceania, Asia, Americas, Africa
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colActions-id"
              >
                <div
                  class="WarehouseList-actions-id"
                >
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                    color="primary"
                    data-test-id="edit-button"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                      />
                    </svg>
                  </button>
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                    color="primary"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
              data-test-id="warehouse-entry-bestocked"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
                data-test-id="name"
              >
                Be stocked
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
                data-test-id="zones"
              >
                Europe, Oceania, Asia, Americas, Africa
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colActions-id"
              >
                <div
                  class="WarehouseList-actions-id"
                >
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                    color="primary"
                    data-test-id="edit-button"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                      />
                    </svg>
                  </button>
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                    color="primary"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
              data-test-id="warehouse-entry-awarehouse"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
                data-test-id="name"
              >
                A Warehouse
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
                data-test-id="zones"
              >
                Europe, Oceania, Asia, Americas, Africa
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colActions-id"
              >
                <div
                  class="WarehouseList-actions-id"
                >
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                    color="primary"
                    data-test-id="edit-button"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                      />
                    </svg>
                  </button>
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                    color="primary"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
              data-test-id="warehouse-entry-darkwares"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
                data-test-id="name"
              >
                Darkwares
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
                data-test-id="zones"
              >
                Europe, Oceania, Asia, Americas, Africa
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colActions-id"
              >
                <div
                  class="WarehouseList-actions-id"
                >
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                    color="primary"
                    data-test-id="edit-button"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                      />
                    </svg>
                  </button>
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                    color="primary"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Warehouses / Warehouse list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Warehouses
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            1/3 warehouses used
          </div>
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-warehouse"
            href="/warehouses/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Warehouse
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Warehouses
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="SearchBar-root-id"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Warehouse"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id WarehouseList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id WarehouseList-colZones-id"
                scope="col"
              >
                Shipping Zones
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id WarehouseList-colActions-id"
                scope="col"
              >
                Actions
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="3"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id WarehouseList-tableRow-id"
              data-test-id="warehouse-entry-undefined"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
                data-test-id="name"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
                data-test-id="zones"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colActions-id"
              >
                <div
                  class="WarehouseList-actions-id"
                >
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                    color="primary"
                    data-test-id="edit-button"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                      />
                    </svg>
                  </button>
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                    color="primary"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Warehouses / Warehouse list no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Warehouses
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div
            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            1/3 warehouses used
          </div>
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-warehouse"
            href="/warehouses/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Warehouse
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Warehouses
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="SearchBar-root-id"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Warehouse"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id WarehouseList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id WarehouseList-colZones-id"
                scope="col"
              >
                Shipping Zones
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id WarehouseList-colActions-id"
                scope="col"
              >
                Actions
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="3"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id"
              data-test-id="empty-list-message"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
                colspan="3"
              >
                No warehouses found
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Warehouses / Warehouse list no limits 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="ExtendedPageHeader-titleRow-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h1-id"
        >
          Warehouses
        </div>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <a
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-warehouse"
            href="/warehouses/add"
            role="button"
            tabindex="0"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Warehouse
            </span>
          </a>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Warehouses
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="SearchBar-root-id"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
          data-test-id="search-input"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Warehouse"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <a
          class="TableRowLink-link-id"
          href="/warehouses/V2FyZWhvdXNlOmEzMThmMGZlLTcwMmYtNDNjYy1hYmFjLWZmZmMzN2Y3ZTliYw%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/warehouses/V2FyZWhvdXNlOjJmN2UyOTlmLWEwMzMtNDhjZS1iYmM5LTFkZDM4NjU2ZjMwYw%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/warehouses/V2FyZWhvdXNlOmM0ZmQ3Nzc0LWZlMjYtNDE1YS1hYjk1LWFlYTFjMjI0NTgwNg%3D%3D"
        />
        <a
          class="TableRowLink-link-id"
          href="/warehouses/V2FyZWhvdXNlOmNlMmNiZDhhLWRkYmQtNDhiNS1hM2UxLTNmZGVkZGI5MWZkMg%3D%3D"
        />
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id MuiTableRow-hover-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id WarehouseList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id WarehouseList-colZones-id"
                scope="col"
              >
                Shipping Zones
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id WarehouseList-colActions-id"
                scope="col"
              >
                Actions
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id"
                colspan="3"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
                >
                  <div
                    class="Pagination-spacer-id"
                  >
                    <div
                      class="Pagination-rowNumber-id"
                    >
                      <span
                        class="Pagination-rowNumberLabel-id"
                      >
                        No. of rows
                      </span>
                       20
                    </div>
                  </div>
                  <div
                    class="Pagination-actions-id"
                  >
                    <button
                      aria-label="previous page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="next page"
                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
              data-test-id="warehouse-entry-cour wares"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
                data-test-id="name"
              >
                C our wares
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
                data-test-id="zones"
              >
                Europe, Oceania, Asia, Americas, Africa
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colActions-id"
              >
                <div
                  class="WarehouseList-actions-id"
                >
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                    color="primary"
                    data-test-id="edit-button"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                      />
                    </svg>
                  </button>
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                    color="primary"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
              data-test-id="warehouse-entry-bestocked"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
                data-test-id="name"
              >
                Be stocked
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
                data-test-id="zones"
              >
                Europe, Oceania, Asia, Americas, Africa
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colActions-id"
              >
                <div
                  class="WarehouseList-actions-id"
                >
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                    color="primary"
                    data-test-id="edit-button"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                      />
                    </svg>
                  </button>
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                    color="primary"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
              data-test-id="warehouse-entry-awarehouse"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
                data-test-id="name"
              >
                A Warehouse
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
                data-test-id="zones"
              >
                Europe, Oceania, Asia, Americas, Africa
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colActions-id"
              >
                <div
                  class="WarehouseList-actions-id"
                >
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                    color="primary"
                    data-test-id="edit-button"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                      />
                    </svg>
                  </button>
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                    color="primary"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
              data-test-id="warehouse-entry-darkwares"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
                data-test-id="name"
              >
                Darkwares
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
                data-test-id="zones"
              >
                Europe, Oceania, Asia, Americas, Africa
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colActions-id"
              >
                <div
                  class="WarehouseList-actions-id"
                >
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                    color="primary"
                    data-test-id="edit-button"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                      />
                    </svg>
                  </button>
                  <button
                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                    color="primary"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MacawIcon-root-id"
                      fill="none"
                      focusable="false"
                      height="24"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.5"
                      />
                    </svg>
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Warehouses with no options selected 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Warehouses
        </span>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        Select warehouses that will be used in this channel. You can assign warehouses to multiple channels.
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiAccordion-root-id Expander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
    >
      <div
        class="AssignmentListHeader-container-id"
      >
        <div
          aria-disabled="false"
          aria-expanded="false"
          class="MuiButtonBase-root-id MuiAccordionSummary-root-id AssignmentListHeader-root-id"
          role="button"
          tabindex="0"
        >
          <div
            class="MuiAccordionSummary-content-id AssignmentListHeader-content-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
            >
              0 / 0 warehouses
            </div>
          </div>
          <div
            aria-disabled="false"
            aria-hidden="true"
            class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
          >
            <span
              class="MuiIconButton-label-id"
            >
              <svg
                data-test-id="expand-icon"
                fill="none"
                height="7"
                viewBox="0 0 10 7"
                width="10"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M1 1L5 5L9 1"
                  stroke="#28234A"
                  stroke-opacity="0.4"
                  stroke-width="2"
                />
              </svg>
            </span>
          </div>
        </div>
        <div
          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
        />
      </div>
      <div
        class="MuiCollapse-container-id MuiCollapse-hidden-id"
        style="min-height:0px"
      >
        <div
          class="MuiCollapse-wrapper-id"
        >
          <div
            class="MuiCollapse-wrapperInner-id"
          >
            <div
              role="region"
            >
              <hr
                class="MuiDivider-root-id"
              />
              <div
                class="MuiTypography-root-id AssignmentList-infoMessage-id MuiTypography-subtitle1-id MuiTypography-colorTextSecondary-id"
              >
                All available warehouses have been selected
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Warehouses with options selected 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="MuiCardHeader-root-id"
    >
      <div
        class="MuiCardHeader-content-id"
      >
        <span
          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
        >
          Warehouses
        </span>
      </div>
    </div>
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        Select warehouses that will be used in this channel. You can assign warehouses to multiple channels.
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiAccordion-root-id Expander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
    >
      <div
        class="AssignmentListHeader-container-id"
      >
        <div
          aria-disabled="false"
          aria-expanded="false"
          class="MuiButtonBase-root-id MuiAccordionSummary-root-id AssignmentListHeader-root-id"
          role="button"
          tabindex="0"
        >
          <div
            class="MuiAccordionSummary-content-id AssignmentListHeader-content-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
            >
              2 / 0 warehouses
            </div>
          </div>
          <div
            aria-disabled="false"
            aria-hidden="true"
            class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id MuiIconButton-edgeEnd-id"
          >
            <span
              class="MuiIconButton-label-id"
            >
              <svg
                data-test-id="expand-icon"
                fill="none"
                height="7"
                viewBox="0 0 10 7"
                width="10"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M1 1L5 5L9 1"
                  stroke="#28234A"
                  stroke-opacity="0.4"
                  stroke-width="2"
                />
              </svg>
            </span>
          </div>
        </div>
        <div
          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
        />
      </div>
      <div
        class="MuiCollapse-container-id MuiCollapse-hidden-id"
        style="min-height:0px"
      >
        <div
          class="MuiCollapse-wrapper-id"
        >
          <div
            class="MuiCollapse-wrapperInner-id"
          >
            <div
              role="region"
            >
              <hr
                class="MuiDivider-root-id"
              />
              <div
                class="AssignmentList-container-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Fancy warehouse
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </div>
              <hr
                class="MuiDivider-root-id"
              />
              <div
                class="AssignmentList-container-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Nice warehouse
                </div>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MacawIcon-root-id"
                    fill="none"
                    focusable="false"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                    />
                  </svg>
                </button>
              </div>
              <hr
                class="MuiDivider-root-id"
              />
              <div
                class="CardAddItemsFooter-container-id"
              >
                <a
                  class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
                  data-test-id="warehouse-add-link"
                >
                  Add Warehouses
                </a>
                <button
                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                  color="primary"
                  data-test-id="warehouse-add-button"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                    />
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;